首页 > 代码库 > JS原生带小白点轮播图
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;
}
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="http://www.mamicode.com/img/31.jpg"></li> <li><img src="http://www.mamicode.com/img/32.jpG"></li> <li><img src="http://www.mamicode.com/img/33.jpG"></li> <li><img src="http://www.mamicode.com/img/34.jpg"></li> <li><img src="http://www.mamicode.com/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原生带小白点轮播图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。