咱们刚刚说了js原生轮播图，现在给他加上可以随着一起走动的小圆点吧！
css代码：
/小白点的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;
}
HTML代码：
JS部分：
//把第一个小白点修改成红色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++){
//把所有的点<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>成蓝色
groundUl.children[x].style.backgroundColor = "#2196f3";}
//把相对应的小白点修改成红色
groundUl.children[num].style.backgroundColor = "red";
}
}
就是这样！！你懂了吗？？
以上这篇JS原生带小白点轮播图实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
