JS轮播图，鼠标放上暂停，自动播放-Toy模板网

这篇具有很好参考价值的文章主要介绍了JS轮播图，鼠标放上暂停，自动播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、图片能够自动轮播，

2、鼠标移入，轮播停止；移出继续轮播；

知识点：1、定时器：setInterval()；

2、鼠标移入事件：onmouseenter/onmouseover；

鼠标移出事件：onmouseleave/onmouseout；

难点：点击第一张图片，我们想要的效果是鼠标移出后，图片轮播到第二张图片，到事实是轮播到第三张图片。

HTML代码如下：

<div id="div_0">
        <img src="img/bg1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

css代码如下:

<style>
        #div_0 {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }
        
        #div_0 img {
            width: 500px;
            height: 300px;
        }
        
        ul {
            display: flex;
            justify-content: space-between;
            width: 400px;
            height: 30px;
            position: absolute;
            bottom: 0;
            left: 0;
            list-style: none;
        }
        
        ul li {
            width: 20px;
            height: 20px;
            background-color: rgba(225, 225, 225, 0.661);
            border-radius: 50%;
        }
        
        .active {
            background-color: aqua;
        }
    </style>

JS代码如下：

<script>
        var index = 0;
        var list = document.querySelectorAll("ul li")

        function changePic() {
            var arr = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg", "bg6.jpg"]
                //如何更换图片
                //获取到图片img
            var img = document.querySelector("#div_0 img")
                //更改img的src来实现图片切换
            img.src = "img/" + arr[index]


            //获取所有的li标签
            var list = document.querySelectorAll("ul li")
                //先将所有li上面的active进行清除
            for (var i = 0; i < list.length; i++) {
                list[i].classList.remove("active")
            }

            list[index].classList.add("active")
            list[index].onmouseover = function() {
                clearInterval(time)
                console.log(1);
            }
            list[index].onmouseout = function(event) {
                    time = setInterval(changePic, 1000)
                    event.stopPropagation()
                }
                // console.log(index)
            index++
            if (index > 5) {
                index = 0
            }
        }
        var time = setInterval(changePic, 1000)
    </script>

js轮播图自动播放,javascript,css,前端