Native js-Carousel

Native js-Carousel

Today write a native JS write the Carousel js effect.

Implementation principle:

1. Create an array for each picture to write the corresponding z-index,opacity,top,width;

2. The operation of rotation is to put the first set of values in the constructed array into the last set, and click the button to execute it once.

Show:

HTML layout:

 <div class= "wrap" id= "wrap" > <div class= "slide" id= "slide" > <ul> <li>< A href= "" ></a></li> <li><a href= "></a></li> <li><a HR ef= "></a></li> <li><a HRE f= "></a></li> <li><a href=" "& Gt;</a></li> </ul> <div class = "Arrow" id= "arrow" > <a href= "javascript:;" id= "Arrleft" class= "prev" ></a> <a href = "javascript:;" id= "Arrright" class= "Next" ></a> </div> </div></div> 

CSS style:

*{margin:0; padding:0; } UL {List-Style:none;            }. Wrap {width:1200px;        margin:100px Auto;            }. slide {height:500px;            position:relative;        width:1200px;            }. Slide ul li {position:absolute; Top:0; Left:0; Z-index:1; }. Slide li img {width:100%;            }. Arrow {position:absolute; Width:100%; Top:50%; Opacity:0; Z-index:3;            }. Prev,. Next {position:absolute;            height:110px;            width:110px; Border-radius:50%; Top:50%; //margin-top: -56px;Overflow:hidden; Text-Decoration:none; }. prev{left:0; Background:url ("Images/slider-icons.png") no-repeat left top; }. next{right:0; Background:url ("Images/slider-icons.png") no-repeat right top; }

JS section:

Next, we'll put the corresponding image style into an array.

 //write the corresponding style for each picture    varConfig = [        {            "Width": 400,            "Top": 20,            "Left": 50,            "Opacity": 0.2,            "ZIndex": 2        },      //0        {            "width": 600,            "Top": 70,            "Left": 0,            "Opacity": 0.8,            "ZIndex": 3        },     //1        {            "Width": 800,            "Top": 100,            "Left": 200,            "Opacity": 1,            "ZIndex": 4        },     //2        {            "width": 600,            "Top": 70,            "Left": 600,            "Opacity": 0.8,            "ZIndex": 3        },    //3        {            "Width": 400,            "Top": 20,            "Left": 750,            "Opacity": 0.2,            "ZIndex": 2        }    //4];

When the page loads, the picture spreads out, calling the array that was just built, assigning them to each picture individually

  var // get all the Li         Function Assign () {    // assign functions for             (var i=0;i<list.length; i++) {                animate (List[i],config[i],function  () {                    flag=true ;                });            }        }        assign ();

Mouse entry and exit there will be left and right arrows to show and hide, click the button rotation principle that changes the array first put in the last or put the last group on the first one. The flag in which the control button is clicked ensures that a set of animations is completed before the next rotation animation can continue.

   //mouse entry, left and right focus of the div displaymy$ ("wrap"). onmouseover=function() {Animate (my$ ("Arrow"), {"Opacity": 1});        }; //Mouse left, left and right focus of the div hiddenmy$ ("wrap"). onmouseout=function() {Animate (my$ ("Arrow"), {"Opacity": 0});        }; //Click on the right button eventmy$ ("Arrright"). onclick=function () {            if(flag) {flag=false;     Config.push (Config.shift ()); //Put the first set of values in the last groupassign ();        }        }; //Click the left button eventmy$ ("Arrleft"). onclick=function () {            if(flag) {flag=false;   Config.unshift (Config.pop ()); //Put the last set of values in the first groupassign ();    }        }; };

Full JS code:

<script>//variable speed animation function    functionAnimate (element, JSON, FN) {clearinterval (Element.timeid); //Cleaning TimersElement.timeid = SetInterval (function () {            varFlag =true;//Suppose the default is that the current value is equal to the target value             for(varArrtinchJSON) {                if(ARRT = = "opacity") {//if the property value is opacity                    varCurrent = GetStyle (element, ARRT) * 100;//Current and target expand 100 times timestarget = JSON[ARRT] * 100; varStep = (target-current)/10; Step= step > 0?Math.ceil (STEP): Math.floor (step); Current+=step; ELEMENT.STYLE[ARRT]= current/100;//100 times times smaller when the operation is finished}Else if(ARRT = = "ZIndex") {//if the property value is ZIndexELEMENT.STYLE[ARRT] =JSON[ARRT]; } Else{//Normal Properties                    varCurrent =parseint (GetStyle (element, ARRT)); Target=JSON[ARRT]; varStep = (target-current)/10; Step= step > 0? Math.ceil (STEP): Math.floor (step);//step greater than 0 rounding up, less than 0 down roundingCurrent + =step; ELEMENT.STYLE[ARRT]= current + "px"; }                if(Current! =target) {Flag=false; }            }            if(flag) {//the timer is cleared only if the current value of all properties is equal to the target valueclearinterval (Element.timeid); if(FN) {//callback functionfn (); }} console.log ("Location:" + current + "target location:" + target + "move steps:" + step);//test function}, 20); }    functionGetStyle (element, ARRT) {returnwindow.getComputedStyle? window.getComputedStyle (element,NULL) [ARRT]: ELEMENT.CURRENTSTYLE[ARRT]; }    functionmy$ (ID) {returndocument.getElementById (ID); }    //write the corresponding style for each picture    varConfig = [        {            "Width": 400,            "Top": 20,            "Left": 50,            "Opacity": 0.2,            "ZIndex": 2        },      //0        {            "width": 600,            "Top": 70,            "Left": 0,            "Opacity": 0.8,            "ZIndex": 3        },     //1        {            "Width": 800,            "Top": 100,            "Left": 200,            "Opacity": 1,            "ZIndex": 4        },     //2        {            "width": 600,            "Top": 70,            "Left": 600,            "Opacity": 0.8,            "ZIndex": 3        },    //3        {            "Width": 400,            "Top": 20,            "Left": 750,            "Opacity": 0.2,            "ZIndex": 2        }    //4    ]; varflag=true;//Assuming the animation is all done-----lock    //page-Loaded eventsWindow.onload=function () {        //1---Diffuse picture        varlist=my$ ("Slide"). getElementsByTagName ("Li");//get all the Li        functionAssign () {//allocation function             for(vari=0;i<list.length;i++) {animate (List[i],config[i],function() {flag=true;            });        }} assign (); //mouse entry, left and right focus of the div displaymy$ ("wrap"). onmouseover=function() {Animate (my$ ("Arrow"), {"Opacity": 1});        }; //Mouse left, left and right focus of the div hiddenmy$ ("wrap"). onmouseout=function() {Animate (my$ ("Arrow"), {"Opacity": 0});        }; //Click on the right button eventmy$ ("Arrright"). onclick=function () {            if(flag) {flag=false;     Config.push (Config.shift ()); //Put the first set of values in the last groupassign ();        }        }; //Click the left button eventmy$ ("Arrleft"). onclick=function () {            if(flag) {flag=false;   Config.unshift (Config.pop ()); //Put the last set of values in the first groupassign ();    }        }; };</script>

Native js-Carousel