*{  margin:0px;  padding: 0px; } ul{  width: 2500px;  height: 300px;  position: absolute; } li{  float: left;  list-style: none; } img{  width: 500px;  height: 300px; } div{  width: 500px;  height: 300px;  margin: 50px auto;  position: relative;  overflow: hidden;  } /*小白點的ul*/ #round_ul{  width:300px;  height: 30px;  /*background:yellow;*/  position: relative;  margin: 250px auto;  }  #round_ul li{  width: 20px;  height:20px;  border-radius: 50%;  background: #2196f3;  margin-left: 50px;  cursor: pointer;  }

<div> <ul>  <li><img src="img/31.jpg"></li>  <li><img src="img/32.jpG"></li>  <li><img src="img/33.jpG"></li>  <li><img src="img/34.jpg"></li>  <li><img src="img/31.jpg"></li> </ul> <ul id="round_ul">  <li></li>  <li></li>  <li></li>  <li></li> </ul>

<script type="text/javascript">//頁面加載完成后 執行代碼 window.onload = function(){  //獲取 ul  var imgUl = document.getElementsByTagName("ul")[0];  var groundUl = document.getElementById("round_ul");  //把第一個小白點修改成紅色children 節點的子節點(不算空白節點)  groundUl.children[0].style.backgroundColor = "red";  var sId,x = 0;  //開始計時器函數  function fn(){   sId = setInterval(abc,10);  }  function abc(){   //每隔10秒修改ul的坐標,修改1px   imgUl.style.left = x-- +"px";   //如果一張圖片完全進入到div中   if(x % 500 == 0){    //調用修改小白點函數    if(x == -2000){     x = 0;     imgUl.style.left = 0 +"px";    }    changLi(Math.abs(x/500));//調用修改小白點方法    clearInterval(sId);//暫定定時器    setTimeout(fn,1000);//隔100毫秒在次啟動定時器   }  }  fn();//修改小白點方法  function changLi(num){   //遍歷小白點數組   for(var x = 0;x<4;x++){    //把所有的點修改成藍色    groundUl.children[x].style.backgroundColor = "#2196f3";   }   //把相對應的小白點修改成紅色   groundUl.children[num].style.backgroundColor = "red";  } }</script>