下列实例是将轮播图所需要的图片封装在一个数组里，通过遍历实现图片的循环播放，并通过setInterval函数控制时间间隔。
HTML布局如下：
<body onload="imagechange()"> <!--承载图片的DIV并试着第一张图片--> <div class="div1"> <img id="imagescroll" src="images/1.jpg"/> </div> </body>
CSS布局如下：
.div1{ margin: 50px auto; width: 80%; height:300px; text-align: center; } #imagescroll{ width: 534px; height: 300px; }
JS代码如下：
function imagechange(){ //获取承载图片的元素 var imagecontrol=document.getElementById("imagescroll"); //把所有的图片封装在一个数组中 var imageArr =["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"]; var index=0; //通过setInterval函数每隔2秒改变一下图片，注意该函数的使用方法 setInterval(function(){ //获取当前图片的编号 var i =index; //如果超过最大编号，则回滚到第一张图片 if(i>=imageArr.length){ index=0; i=0; } //设置背景图片 imagecontrol.src=imageArr[i]; index=index+1; },2000); }
4073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
