JavaScript Seamless and smooth animation carousel, finally let me get out of it.

I have always wanted to write a really can use the Carousel diagram, previously wrote a, but is not a seamless carousel, feel bad, this carousel before also made a lot of examples, read a lot of code, but the brain always turn the bend, why in the movement to a certain distance after a sudden turn back to the original position, and no movement situation? Why do I know the timer, or is there a timer overlap, causing the carousel chaos? How to make the left and right buttons, paging buttons, the Carousel function, when triggering an event, does the carousel run properly? How do I swipe to the left (the previous one) at the first Li?

Usually own free to think, tried a lot of methods, but always do not come out, today read someone else write plug-ins, after found:

1. when the UL rolls over to the last one, the instantaneous return to the initial position, without the action, is supposed to be part of the movement for the moment we all return to the initial position.

2. about the timer overlap, the problem, I tried to pass the IF (timer) {clearinterval (Timer)} method, but not good, should be a click on the page, or there will be problems, and finally looked at someone else's code, After the mouse is moved into the slider, clear the timer, you can solve this problem once and for all, because, when the mouse moved into the slider, the timer is cleared, and before the timer is not restarted all operations, is not automatic rotation of the case.

3. let the left and right buttons, paging buttons, the rotation function combined, I think so, the carousel function can be independent, and then by acquiring the current offsetlleft, after the movement of the offsetlleft to determine the distance and direction of motion, Then the left and right buttons can be connected by setting the positive and negative parameters of each Li's width, and the paging function and the left-and right-function are linked by the index's increment or decrement, the transfer parameter, the paging function and the Carousel function, by getting the index value of the current paging and clicking the index value of the page, of course, Access can be set through Setattibute and GetAttribute.

4. With regard to the last question, we all know that if the current page is the first page, if you click on the previous one, there will be blank, anyway is wrong, so when we initialize, we need to first add the last scroll unit (the last picture of Li), In order to let the last Li to scroll to return to the initial position, but also at the end of the UL add the first Li, if you think, this will not affect the paging it. In fact, we can set the Data-index by the independent setting, and the length of the page can also be set by initializing it, because there is no node added at that time.

Html

<! DOCTYPE html>
 JavaScript 
 
<script type= "Text/javascript" src= "startmove.js" ></script><script type= "Text/javascript" > Window.onload = function () {var slider = document.getElementById (' slider '); var Oul = Slider.getelementsbytagname (' ul ') [        0];var oLi = oul.getelementsbytagname (' li ');        var liwidth = parseint (GetStyle (oli[0], ' width '));        var anext = document.getElementById (' Next ');        var Aprev = document.getElementById (' prev ');        var timer = null;        var inter = 3000;        var index = 0;        var oOl = slider.getelementsbytagname (' ol ') [0];        var pLi = ool.getelementsbytagname (' li ');                var B = false; Initialize function Intslider () {for (var i = 0; i < oli.length; i++) {Oli[i].setattribute (' Data-index        ', i);        } for (var i = 0; i < oli.length; i++) {var iLi = document.createelement (' li ');        Ool.appendchild (ILi); } for (var i = 0; i < pli.length; i++) {Pli[i].setattribute (' data-index ', i)} pli[0].classname = ' on ';            var Clonelastli = Oli[oli.length-1].clonenode (true);        var Clonefirstli = Oli[0].clonenode (true);        Oul.insertbefore (Clonelastli,oul.childnodes[0]);        Oul.appendchild (Clonefirstli);        OUl.style.left =-parseint (GetStyle (oli[0], ' width ') + ' px ';        };                Intslider ();        Re-set the UL width function getwidth () {var liwidth = parseint (GetStyle (oli[0], ' width '));        OUl.style.width = oli.length * liwidth + ' px ';        };                GetWidth (); Mouse move in the removal of the timer, it saves a lot of trouble to clear the timer slider.onmouseover = function () {if (timer) {Clearinterval (timer            );        } startmove (anext,{right:20});                    Startmove (aprev,{left:20});        };        Slider.onmouseout = function () {timer = setinterval (Nextslider, Inter);        Startmove (anext,{right:-100});                    Startmove (aprev,{left:-100});  };      Core function Slideroffset (offset) {b = true;            Left var currentleft = Oul.offsetleft After the current left and scroll;    var afterleft = currentleft + offset;                    Startmove (Oul, {left:afterleft},function () {if (Oul.offsetleft <=-(oul.offsetwidth) + liwidth) {            oul.style.left=-liwidth + ' px ';            } else if (oul.offsetleft >= 0) {oul.style.left=-(oli.length-2) * liwidth + ' px ';            };            b = false;        });        }; Current paging function Pageslider (index) {for (var i = 0; i < pli.length; i++) {if (Pli[i].classname = =        ' on ') {pli[i].classname = ';        }} pli[index].classname = ' on ';        }; Paging click function for (var i = 0; i< pli.length; i++) {Pli[i].onclick = function () {var index1 = This.get        Attribute (' Data-index ');        var offset = (index-index1) * liwidth;      Slideroffset (offset)  index = INDEX1;        Pageslider (index);                }        };        Previous function Nextslider () {if (b) {return;        } slideroffset (-liwidth) if (index >= pli.length-1) {index = 0;                }else{index++} pageslider (Index)};        Next function Prevslider () {if (b) {return;        } slideroffset (Liwidth);        if (index <= 0) {index = pli.length-1;        }else{index--} pageslider (index);                }; Event binding compatibility function Addevent (Element,event,listener) {if (Element.addeventlistener) {Element.addeventl        Istener (Event,listener,false);        }else{element.attachevent (' on ' + event, listener);                 }        };        Bind event Addevent (anext, ' click ', Nextslider);        Addevent (Aprev, ' click ', Prevslider); Style get function GetStyle (obj, attr) {if (Obj.currentstyle) {return obj.cUrrentstyle[attr]}else{return getComputedStyle (obj,false) [attr]}};//auto-Carousel timer = setinterval (NextSlider, Inter);} </script>
　　
JavaScript Seamless and smooth animation carousel, finally let me get out of it.