JS Native Carousel Map

Ah, Hello! My friends, there is a new project recently. So has not been updated! Did you miss me?!

Today let's take a look at JS native Carousel Map!

Not many words said:

Go directly to the code: here is the CSS section:

1 *{2 padding:0px;3 margin:0px;4}5 img{6 width:500px;7 Height:300px;8}9 Li{Ten float: Left; One} A ul{ - width:2000px; - List-style:None; the position:Absolute; -} - Div{ - width:500px; + Height:300px; -                 /*overflow partially hidden*/ + Overflow:Hidden; A margin:60px Auto; at position:relative; -}

HTML section!

<div><ul><li></li><li>< /li><li></li><li></li></ul ></div>

Next is the JS section:

1 //1. Get to UL2             varUL = document.getElementsByTagName ("ul") [0];3             varx = 0;4             5             //ID used to turn off the timer.6             varid = setinterval (abc,10);7             8             functionABC () {9Ul.style.left = x--+ "px";Ten                  One                 //If the picture is in the third week A                 if(x = =-1500){ -x = 0;//Change the UL into the first picture -Ul.style.left = x+ "px"; the                 } -                 if(x% 500 = = 0) {//The first picture comes in -Clearinterval (ID);//Turn off the timer -                     //Turn on timer for half second +SetTimeout (function(){ -                         //after 500 milliseconds, the timer is turned on. +id = setinterval (abc,10); A},500);//setTimeout Delay Execution at                 } -}

It's so simple! Have you learned it??

JS Native Carousel Map