JavaScript Example learning eight-seamless transition effect

Seamless switching is involved in many areas of the site, such as carousel maps.

Basic ideas:

1) Copy the current element of the window and add it as a sub-element in the UL

2) Change the overall value of the UL (negative window value), the animation is slowed to the desired position

3) Remove each Li from the original window (which has been copied)

4) Re-adjust the value of the UL left to 0

HTML code to implement:

<! DOCTYPE html>"en">"UTF-8"> <title> test page </title> <style> *{margin:0;p adding:0; box-sizing:border-box;} div{width:480px;height:150px;border:5px Solid # the; margin-left:300px;        Position:relative;} ul{Overflow:hidden; position:absolute; Left:0 ;} UL li{width:150px; height:150px; Background:blue ;float: Left;margin-right:10px;list-style:none; Color:white; font-size:34px;text-Align:center;} </style>"Div1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <button id="btn"> Toggle </button> <script src="./commonjs/tool.js"></script> <script src="./commonjs/base.js"></script> <script src="./usualeffects/js/myswitch.js"></script> </body>seamlessly switch HTML code
JS Code:
$ (function () {varOul = document.getElementsByTagName ('ul')[0]; varALis = document.getElementsByTagName ('Li'); varOnesize = alis[0].offsetwidth +Ten; varShownum =3; varShowwidth = Shownum *onesize; varBTN = document.getElementById ('btn'); varFlag =true; function Setulwidth () {varSumwidth = Alis.length *onesize; Console.log ('Sumwidth:'+sumwidth); OUl.style.width= Sumwidth +'px';    } setulwidth (); Btn.addeventlistener ('Click', function () {//to prevent animation from accumulating, set the flag parameter to start the next animation only after the last animation has ended        if(flag) {flag=false;  for(vari =0; i < Shownum; i++) {                //copy and paste the previous Shownum elements to the back of the list                varCloneNode = Alis[i].clonenode (true);                Oul.appendchild (CloneNode);            Setulwidth (); } $ (Oul). Animate ({' Left':-showwidth +'px'}, Function () {//callbacks after the end of the animation//to delete an added element                 for(varK =0; K < Shownum; k++) {                     This. removechild (alis[0]); }                //restores the left value of UL                 This. Style.left =0; Flag=true;        }); }    }, false);});
seamlessly toggle JS Code
JavaScript Example learning eight-seamless transition effect