JS native Belt Small white point carousel Map

We just talked about JS native Carousel, now add a little polka dot that you can walk with!

CSS code:

*{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*/of small white point #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 code:

<div><ul><li></li><li>< /li><li></li><li></li><li ></li></ul><ul id= "Round_ul" ><li></li><li> </li><li></li><li></li></ul>

JS section:

<script type= "Text/javascript" >//execute code After page load is completeWindow.onload =function(){        //Get UL        varImgul = document.getElementsByTagName ("ul") [0]; varGroundul = document.getElementById ("Round_ul"); //Change the first small white point to a child node of the Red Children node (not a blank node)Groundul.children[0].style.backgroundcolor = "Red"; varsid,x = 0; //Start Timer function        functionfn () {sId= SetInterval (abc,10); }        functionABC () {//revise the UL coordinates every 10 seconds, modify 1pxImgUl.style.left = x--+ "px"; //If a picture goes completely into the Div            if(x% 500 = = 0){                //invoke modify small white point function                if(x = =-2000) {x= 0; ImgUl.style.left= 0 + "px"; } Changli (Math.Abs (x/500));//Call to modify the small white point method Clearinterval (sId);//Tentative TimerSetTimeout (fn,1000);//every 100 milliseconds in the secondary start timer}} fn ();//Modify the small white point method        functionChangli (num) {//traversing small white point groups             for(varx = 0;x<4;x++){                //change all the dots to blueGroundul.children[x].style.backgroundcolor = "#2196f3"; }            //change the corresponding small white point to redGroundul.children[num].style.backgroundcolor = "Red"; }    }</script>

That's it!! Do you understand??

JS native Belt Small white point carousel Map