大图轮播间隔播放
进行布局
#tu{ width:500px; height:400px; float:left } .img{ display:none}
首先写好格式,插入图片,
<div id="tu"> <img class="img" src="../359417.jpg" width="500" height="400" style="display:block" /> <img class="img" src="../653042.jpg" width="500" height="400" /> <img class="img" src="../1103701.jpg" width="500" height="400" /> <img class="img" src="../1105105.jpg" width="500" height="400" /> </div> 设好宽和高
给图片进行间隔操作
<script type="text/javascript"> window.setInterval("Huan()",3000); var sy = 0; function Huan() { 找到它 var img = document.getElementsByClassName("img"); sy++; 判断索引是不是超过了图片长度 if(sy>=img.length) { sy = 0; } for(var i=0;i<img.length;i++) { 隐藏其余 img[i].style.display = "none"; } 显示下一张 img[sy].style.display = "block";
完成