下面前端入门建站教程为大家介绍一下原生JS最简单实现图片flash循环切换
HTML代码
<div>
<div id="div1" style="display:block;"><img src="images/1.png" /></div>
<div id="div2" style="display:none;"><img src="images/2.png" /></div>
<div id="div3" style="display:none;"><img src="images/3.png" /></div>
<div id="div4" style="display:none;"><img src="images/4.png" /></div>
<div id="div5" style="display:none;"><img src="images/5.png" /></div>
<div id="div6" style="display:none;"><img src="images/6.png" /></div>
<div id="div7" style="display:none;"><img src="images/7.png" /></div>
</div>
JS代码
var NowImg=1;//表示当前显示的div
var MaxImg=7;//表示div的个数
setInterval(function(){
//#通过更改元素的display属性来设置显示的图片
for(var i=1;i<=MaxImg;i++){
if(NowImg==i)
document.getElementById("div"+NowImg).style.display='block';//当前显示的div
else
document.getElementById("div"+i).style.display='none';
}
if(NowImg==MaxImg)//判断当前div是否是最后一个,如果是则从第一个重新轮回显示
NowImg=1;
else
NowImg++;//设置下一个显示的图片
},2000)
上面是“原生JS最简单实现图片flash循环切换”的全面内容,想了解更多关于 js 文章,请继续关注前端入门建站教程。