*{    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 延時執行    }   }