Native JS imitation netease carousel Map

<!--HTML Section -<DivID= "Wrap">    <Divclass= "Picbox">    <!--Picture Area -        <DivID= "Pic">            <Div><ahref="#"><imgsrc= "Imgs/1.jpg"alt=""/></a></Div>            <Div><ahref="#"><imgsrc= "Imgs/2.jpg"alt=""/></a></Div>            <Div><ahref="#"><imgsrc= "Imgs/3.jpg"alt=""/></a></Div>            <Div><ahref="#"><imgsrc= "Imgs/4.jpg"alt=""/></a></Div>            <Div><ahref="#"><imgsrc= "Imgs/5.jpg"alt=""/></a></Div>        </Div>    </Div>    <DivID= "Ctrl">    <!--Button control Area -        <spanclass= "Ctrlprev"><</span>        <spanclass= "Ctrlnext">></span>    </Div></Div>

/*CSS Section*/* {margin:0;padding:0;}img{vertical-align:Top;}#wrap{width:576px;Height:374px;margin:150px Auto;position:relative;Overflow:Hidden;}. Picbox{width:576px;Height:324px;}#pic{width:1152px;Height:324px;}#pic Div{position:Absolute;Top:0; Left:0;width:576px;Height:324px;}#pic div img{width:100%;}#ctrl{text-align:Center;Padding-top:5px;}. Ctrllist{width:24px;Height:5px;Display:Inline-block;background:#e4e4e4;margin:0 5px;cursor:Pointer;text-indent:10em;Overflow:Hidden;}. Active{background:#7bbedf!important;}. Ctrlprev,.ctrlnext{position:Absolute;Top:35%;font-size:50px;Color:#fff;Line-height:42px;width:40px;Height:50px;Opacity:0.8;cursor:Pointer;}. Ctrlprev{ Left:0;}. Ctrlnext{ Right:0;}

//js Sectionfunction$ (ID) {returndocument.getElementById (ID);}varAPic = $ ("pic"). Children;//get the number of picturesvarDISX = $ ("wrap"). offsetwidth;//get the width of the large box, i.e. the width of the picture to govarAspan = $ ("Ctrl"). Children;//get the number of buttons for(vari = 1; i < apic.length; i++) {Apic[i].style.left= Disx + "px";//except for the first one, the other pictures are by default outside the big box.} for(vari = 0; i < apic.length; i++) {//automatically generate small buttons    varspan = document.createelement ("span");//Create a SPAN elementSpan.classname = "Ctrllist"; Span.innerhtml= Apic.length-i;//Add ordinal$ ("Ctrl"). InsertBefore (span, aspan[1]);//Add to #ctrl}aspan[1].classname = "Ctrllist active";//The first button is selected by defaultvarindex = 0;//Build an index for(varKinchAspan) {//Traverse ButtonAspan[k].onclick =function () {        if( This. ClassName = = "Ctrlprev") {//Click on the previous oneMove (Apic[index], DISX)//now move right out of the big box .--index < 0? index = apic.length-1: index;//whether the index is greater than the picture length is equal to the length after the first operationApic[index].style.left =-disx + "px";//the next one moves directly to the left of the big box .Move (Apic[index], 0)//move the next left into the big box .Active (); } Else if( This. ClassName = = "Ctrlnext") {//Click the next oneAutoPlay (); } Else{//Click the small button            varNewIndex = This. innerHTML-1;//Create a new index match sequence number            if(Index < NewIndex) {//The current index is less than the hit index numberMove (Apic[index],-DISX)//the current sheet left out of the big boxApic[newindex].style.left = Disx + "px";//the next one moves directly to the right of the big box .}Else if(Index > NewIndex) {//The current index is greater than the hit index numberMove (Apic[index], DISX)//now move right out of the big box .Apic[newindex].style.left =-disx + "px";//the next one moves directly to the left of the big box .} move (Apic[newindex],0)//move the next one into the big box .index = NewIndex;//The current index is assigned to the old indexActive (); }    }}varTimer =NULL; a timer= SetInterval (AutoPlay, 2000);//Adding Timers$("Wrap"). onmouseover =function() {//Mouse Move-off timerclearinterval (timer);} $("Wrap"). onmouseout =function() {//mouse out turn on timerTimer = SetInterval (AutoPlay, 2000);}functionActive () {//Small button selected     for(vari = 1; i < aspan.length-1; i++) {Aspan[i].classname= "Ctrllist"; } Aspan[index+ 1].classname = "Ctrllist Active";}functionMove (obj, left) {//Moving Animationsclearinterval (Obj.timer); Obj.timer= SetInterval (function () {        varStep = (left-obj.offsetleft)/8;//Step SizeStep = step > 0? Math.ceil (STEP): Math.floor (step);//processing Decimals In addition to not netObj.style.left = obj.offsetleft + step + "px"; if(Obj.offsetleft = =Left )        {clearinterval (Obj.timer); }    }, 30)}functionAutoPlay () {//AutoPlay is the same as clicking on the next oneMove (Apic[index],-DISX)//the current sheet left out of the big box++index > Apic.length-1? index = 0:index;//whether the index is greater than the image length is equal to 0 after the first operationApic[index].style.left = Disx + "px";//the next one moves directly to the right of the big box .Move (Apic[index], 0)//move the next one right into the big box .active ();}

Native JS imitation netease carousel Map