JS原生带小白点轮播图

Posted 2020-09-29 ITandYT

咱们刚刚说了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>

就是这样！！你懂了吗？？