js图片自动轮播

最新推荐文章于 2022-11-21 18:34:51 发布

随心吗

最新推荐文章于 2022-11-21 18:34:51 发布

阅读量285

点赞数

文章标签： javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{margin:0; padding:0;}
#box{width:1400px; height:auto; position: absolute;left: 20%;}
#box ul{list-style:none; position:relative;}
#box ul li{width:100%; height:auto; position:absolute; transition:all 1s; opacity:0;}

</style>
<body>
<div id="box">
<ul>
<li><img src="img/pic01.jpg"/></li>
<li><img src="img/pic02.jpg"/></li>
<li><img src="img/pic03.jpg"/></li>
</ul>
</div>
</body>

<script type="text/javascript">
onload = function(){
//获取
var li = document.getElementById('box').getElementsByTagName('li');
var index = 0;
goto();
function goto(){
for(var i=0;i<li.length;i++){li[i].style.opacity = 0;}
if(index == li.length) index = 0;
li[index++].style.opacity = 1;

}
//定时器
setInterval(goto,3000);
}

</script>
</html>