JS-定时器自动切换图片

吃不饱的小明同学

已于 2023-04-09 11:38:59 修改

阅读量765

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript 前端开发语言

于 2022-12-16 15:24:29 首次发布

本文链接：https://blog.csdn.net/weixin_45959965/article/details/128343421

JS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现图片轮播的方法。通过定义样式和使用DOM选择器，结合定时器来切换背景图片，实现了简洁的图片轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
.imgBox{
    width: 500px;
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
<body>
     <button>开始</button>
     <button>停止</button>
     <div class="imgBox"></div>

     <script>
         
         var imgBox = document.querySelector('.imgBox')
         var btn = document.querySelectorAll('button')

         var imgArr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
         console.log(imgArr.length);
         var i = 0  //一般有数组的地方都是有数字的,有数字就可以操作数组
         var timer = null //要设置定时器首先得有开关
        // 点击开始 执行定时器
         btn[0].onclick = function(){
            clearInterval(timer) //在每次使用定时器前先清除一下定时器
            timer = setInterval(function(){
                imgBox.style.backgroundImage = `url(${imgArr[i]})`
                i++
                i %= imgArr.length  //i 除以数组的长度，这样每次就只有数组中的图片来回切换
            },1000)
         }

         btn[1].onclick = function(){
            clearInterval(timer)
         }
        
        // 方法二：
        //  let i = 0;
        //  let aaa = setInterval(function() {
        //     imgBox.style.backgroundImage = `url(${imgArr[i]})`
        //     i++
        //     if(i >= imgArr.length){
        //         i = 0
        //     }
        //  },1000)
     </script>
</body>