浅谈使用原生JS实现轮播

实现思路:

• 外层div设置为视图框
• 内层ul包含许多个li
• 每个li中,都放一张图片

HTML代码

<div class="slider">
  <ul>
     <li><img src="Algarve, Portugal.jpg"></li>
     <li><img src="China, Asia.jpg"></li>
     <li><img src="Niagara Falls.jpg"></li>
     <li><img src="Provence, France.jpg"></li>
     <li><img src="Rio de Janeiro, Brazil.jpg"></li>
     <li><img src="Salar de Uyuni, Bolivia.jpg"></li>
  </ul>
</div>

CSS代码

/*create 2016.8.04*/
*{
    box-sizing: border-box;
}

a{
    text-decoration: none;
}

ul,li{
    list-style: none;
    margin: 0;
    padding: 0;
}

#slider{
    width: 800px;
    height:300px;
    overflow: hidden;
    position: relative;
    margin: 100px auto;
}

#slider ul{
    width: 4800px;
    position: relative;
}

#slider ul:after{
    content: "";
    width: 0;
    height: 0;
    display: block;
}

#slider ul li{
    float:left;
    width: 800px;
    height: 300px;
    overflow: hidden;
}

#slider ul li img{
    width: 100%;
}

JS代码

/*create 2016.8.04*/
    (function(){
        var slider = document.getElementById("slider")
        var imgul = document.getElementsByTagName("ul")[0]
        var imglis = imgul.getElementsByTagName("li")
        var index = 0
        setInterval(function(){
            if(index>=imglis.length){
                index = 0
            }
            imgul.style.left = -(index*800) + 'px'
            index++
        },1000)//设置定时器间隔为1s
    })()