下面小编就为大家带来一篇JS原生带小白点轮播图实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
咱们刚刚说了js原生轮播图，现在给他加上可以随着一起走动的小圆点吧！
css代码：
*{
margin:0px;
padding: 0px;
}
ul{
width: 2500px;
height: 300px;
position: absolute;
}
li{
float: left;
list-style: none;
}
img{
width: 500px;
height: 300px;
}
p{
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代码：
<p> <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";
//如果一张图片完全进入到p中
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原生轮播图的实例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！
