大图轮播间隔播放
进行布局
#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";
完成
浙公网安备 33010602011771号