JavaScript,定时器制作自动轮播切换图片效果
程序开发
2023-09-03 13:29:24
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);};});
标签:
上一篇:
angular中配置cesium
下一篇:
JS判断一个对象是否为空的方法
相关文章
-
无相关信息