JS native with a little white point carousel image, js little white

JS native with a little white point carousel image, js little white

We just talked about the js native carousel image. Now we can add a small dot that can move along with him!

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 */# 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"> // After the page is loaded, run the code window. onload = function () {// obtain ul var imgUl = document. getElementsByTagName ("ul") [0]; var groundUl = document. getElementById ("round_ul"); // modify the first child node (not a blank node) of the red children node to groundUl. children [0]. style. backgroundColor = "red"; var sId, x = 0; // start the timer function fn () {sId = setInterval (abc, 10);} function abc () {// modify the ul coordinates every 10 seconds and 1px imgUl. style. left = x -- + "px"; // if an image enters the div completely, if (x % 500 = 0) {// call the modify white point function if (x =-2000) {x = 0; imgUl. style. left = 0 + "px";} changLi (Math. abs (x/500); // call the clearInterval (sId) method for modifying the white point; // The tentative timer setTimeout (fn, 1000 ); // start the timer every 100 milliseconds} fn (); // modify the function changLi (num) method of the white point {// traverse the white point array for (var x = 0; x <4; x ++) {// change all vertices to Blue groundUl. children [x]. style. backgroundColor = "#2196f3";} // change the corresponding white point to Red groundUl. children [num]. style. backgroundColor = "red" ;}}</script>

That's it !! Do you understand ??