定时器的基本使用

JS定时器

开启定时器

 setInterval(函数, 间隔时间)

关闭定时器

let 变量 = setInterval(函数, 间隔时间)
 clearInterval(变量)

用定时器实现自动切换图片，当鼠标进入时暂停，鼠标移出时又开始播放

​ 1、html部分

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

​ 2、js部分

<script>
        // 获取img元素节点
        let img = document.querySelector('img')
            // 获取p元素节点
        let p = document.querySelector('p')
            // 设置一个开始索引
        let i = 1
        //获取div元素节点
        let div = document.querySelector('div')
        //声明一个定时器句柄
        let timeId
            // 设置一个的定时器的函数，方便代码的复用
        function startTime() {
            timeId = setInterval(function() {
                i++
                // 当图片轮播完第九张图时，重新给索引赋值
                if (i >9) {
                    i = 1
                }
                // 根据索引值生成一个路径
                let path = `./images/b0${i}.jpg`
                    // 给图片属性赋值一个路径
                img.src = path
                //给p元素重新赋值
                p.innerText = `第${i}张图片`
            }, 1000)
        }
        // 调用定时器
        startTime()
            // 鼠标进入，停止定时器
        div.addEventListener('mouseenter', function() {
            	//清除定时器
                clearInterval(timeId)
            })
            // 重启定时器
        div.addEventListener('mouseleave', function() {
            //调用定时器
            startTime()
        })
    </script>

注意点：注意变量的作用域，在函数里面声明的变量是局部变量，不能在外面使用，需要声明全局变量。