梅花真洁白啊！像冬天里的雪花；梅花真美丽啊！像翩翩起舞的天鹅；梅花真坚强啊！像个英勇的战士。梅花坚强不屈的精神一直激励着我前进。
咱们刚刚说了js原生轮播图，现在给他加上可以随着一起走动的小圆点吧！
css代码：
*{
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;
}
HTML代码：
<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>
JS部分：
<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>
就是这样！！你懂了吗？？
以上这篇JS原生带小白点轮播图实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
