轮播图自动播放

运用定时器setInterval(function() {})改变图片的路径实现自动轮播，运用mouseenter鼠标悬停停止，mouseleave鼠标移出开启，clearInterval()清除定时器

特殊场景

只适应于图片路径递增，如果路径名不同，将路径放在数组或者对象中，通过改变其数组下标，实现轮播

HTML部分

 <div>
        <img src="./images/b01.jpg" alt="" />
        <p>第1张图片</p>
    </div>

css部分

        * {
            padding: 0;
            margin: 0;
        }
        
        div {
            width: 700px;
            height: 320px;
            margin: 100px auto;
            position: relative;
        }
        
        p {
            position: absolute;
            left: 0;
            bottom: 0;
            line-height: 50px;
            background-color: #666;
            color: #fff;
            width: 100%;
            padding-left: 10px;
            font-size: 20px;
            box-sizing: border-box;
        }

获取标签

   // 获取标签
        let img = document.querySelector('img')
        let p = document.querySelector('p')
            // 生成索引
        let index = 1
            // 开启定时器
        let timeId
        startTime()

实现图片自动轮播

通过每秒改变图片路径来实现自动轮播

 function startTime() {
            timeId = setInterval(function() {
                //  索引自增
                index++
                // 给索引设置边界，索引大于10时重新设置为1
                if (index == 10) {
                    index = 1
                }
                // 根据索引生成图片地址
                let path = `./images/b0${index}.jpg`  
                img.src = path
                p.innerText = `第${index}张图片`
            }, 1000)
        }

鼠标移入移出事件

   let div = document.querySelector('div')
            //   鼠标移入：停止定时器
        div.addEventListener('mouseenter', function() {
                clearInterval(timeId)
            })
            //   鼠标移出：重启定时器
        div.addEventListener('mouseleave', function() {
            startTime()
        })

效果如下：