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="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>

就是這樣！！你懂了嗎？？