<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>JS-定时器自动切换图片
猜你喜欢
转载自blog.csdn.net/weixin_45959965/article/details/128343421
今日推荐
周排行