JS原生带小白点轮播图实例讲解

*{  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>