图片轮播定时器

最新推荐文章于 2022-07-09 20:10:23 发布

徐行莫停

最新推荐文章于 2022-07-09 20:10:23 发布

阅读量372

点赞数

CC 4.0 BY-SA版权

分类专栏：常见网页特效文章标签：定时器图片轮播

本文链接：https://blog.youkuaiyun.com/qq_35765126/article/details/60742345

常见网页特效专栏收录该内容

5 篇文章

订阅专栏

<!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>

图片轮播 定时器

图片轮播定时器