小白的第一个简易轮播图;
仅供记录学习与分享;
***HTML代码:***
<div class="wrapper">
<ul>
<img src="img/1.jpg" alt=""><img src="img/3.jpg" alt=""><img src="img/8.jpg" alt=""><img src="img/9.jpg" alt=""><img src="img/114.jpg" alt=""><img src="img/1.jpg" alt="">
</ul>
</div>
***CSS代码:***
*{
padding: 0;
margin:0;
text-decoration:none;
list-style:none;
}
body,html{
width:100%;
height:100%;
overflow:hidden;
}
.wrapper{
position: relative;
width:100%;
height:100%;
background-color: #333;
}
ul{
position: absolute;
top: 250px;
left: 50%;
margin-left: -250px;
width: 500px;
height: 300px;
border:2px solid black;
overflow:hidden;
}
img{
position: absolute;
width: 500px;
height: 300px;
}
***JS代码:***
var oImg = document.getElementsByTagName('img');
var timer;
var i = 5;
function init(){
timer = setInterval(function (){
oImg[i].style.left = -500 + 'px';
i--;
if(i == 0){
play();
}
}, 1000);
}
function play(){
clearInterval(timer);
i = 5;
for(var j = 0; j<6; j++){
oImg[j].style.left = 0 + 'px';
}
init();
}
init();