图片轮播定时器

来源：互联网发布：调节阀口径计算软件编辑：程序博客网时间：2024/05/21 22:56

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
#wrap{
width:1000px;
height:700px;
margin:40px auto;
border:1px solid grey;
}
.images{
width:1000px;
height:700px;
position:absolute;
display:none;
}
</style>

</head>

<body>
<div id="wrap">
<ul id="box">
<li class="images" ><img src="images/4.jpg" width="1000px" height="700px" ></li>
<li class="images" ><img src="images/3.jpg" width="1000px" height="700px"></li>
<li class="images" ><img src="images/2.jpg" width="1000px" height="700px"></li>
<li class="images" ><img src="images/1.jpg" width="1000px" height="700px"></li>
</ul>
</div>
</body>

<script type="text/javascript">
//自动轮播
window.onload=function(){
var imgLis=document.getElementsByClassName("images");
var j=0;
var i;
var flag=0
setInterval(function(){
if(flag>=0){//&&j>0&&j<=imgLis.length
imgLis[3].style.display="none";
}
if(j>0&&j<=imgLis.length){
imgLis[j-1].style.display="none";
}
if(j<imgLis.length){
imgLis[j].style.display="block";
j=j+1;
i=j;

if(i==4){
flag+=1;
//imgLis[3].style.display="none";
j=0;
//alert(j);
}
}
},1000);

}
</script>
</html>

0 0

图片轮播 定时器

图片轮播定时器