素材巴巴 > 程序开发 >

JavaScript,定时器制作自动轮播切换图片效果

程序开发 2023-09-03 13:29:24

banner

1.设置定时器,改变索引值(设索引值为loop) 

2.定时器每循环一次索引加1,loop += 1,取余保证循环轮播,loop %= 10

3.设置下标为loop的className为current,下标为loop的数组图片的display = "block";

 window.addEventListener("load", function(){//1.获取标签var lis = document.getElementsByTagName("li");var imgs = document.getElementsByTagName("img");var box = document.getElementById("box");//2.索引var loop = 0;//定时器名称var inter = null;//3.设置定时器,inter = setInterval(function () {//3.1排他,清除掉所有li的className,所有img的dispaly设置为nonefor(var i = 0; i < lis.length; i++){lis[i].className = "";imgs[i].style.display = "none";}//3.2设置当前索引下li的className,img的displaylis[loop].className = "current";imgs[loop].style.display = "block";//3.3更改索引console.log(loop);loop += 1;loop %= 10; //10%10 = 0 11%10 = 1  塑造循环下标}, 1000);};});

 


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。