第一个简易轮播图

小白的第一个简易轮播图;
仅供记录学习与分享;

***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();