JS原生轮播图的简单实现(推荐)

*{    padding: 0px;    margin: 0px;   }   img{    width: 500px;    height: 300px;   }   li{    float: left;   }   ul{    width: 2000px;    list-style: none;    position: absolute;   }   div{    width: 500px;    height: 300px;    /*溢出部分隐藏*/    overflow: hidden;    margin: 60px auto;    position: relative;   }

<div> <ul>  <li><img src="img/1.jpg" /></li>  <li><img src="img/2.jpg"/></li>  <li><img src="img/3.jpg"/></li>  <li><img src="img/1.jpg" /></li> </ul></div>

//1、获取到ul   var ul = document.getElementsByTagName("ul")[0];   var x = 0;      //id 用来关闭定时器的   var id = setInterval(abc,10);      function abc(){    ul.style.left = x-- +"px";        //如果到第三周图片了    if(x == -1500){     x = 0;//把ul修改成第一张图片     ul.style.left = x+"px";    }    if(x % 500 == 0){ //第一张图片进来     clearInterval(id); //关闭定时器     //开启定时器 隔半秒钟开启定时器     setTimeout(function(){      //500毫秒之后开启定时器，继续执行      id = setInterval(abc,10);     },500);//setTimeout 延时执行    }   }