Native JS rewrite the "sharp JS" carousel effect

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
   
 
$ (function () {    var page = 1;    var i = 4;     $ ("Span.next"). Click (function () {  &nbs p;     var $parent = $ (this). Parents ("Div.v_show");        var $v _ Show = $parent. Find ("Div.v_content_list");        var $v _content = $parent. Find ("Div.v_ Content ");        var v_width = $v _content.width ();         var len = $v _show.find ("li") .length;        var page_count = Math.ceil (len/i);         if (! $v _show.is (": Animated")) {            if (page = = page_count) {             $v _show.animate ({left: "0px"}, "slow" );            page = 1;            }else {               $v _show.animate ({left: "-=" + V_width}, "slow");                page++ ;            }             $parent. Find ("span"). EQ ((page-1)). AddClass ("current"). Siblings (). Removeclass ("current");         }     });     $ ("Span.prev"). Click (function () {         var $parent = $ (this). Parents (" Div.v_show "); gets to parent element     var $v _show = $parent According to the current click Element. Find (" div.v_content_list "); Find "video content area"     var $v _content = $parent. Find ("div.v_content"); Find "video content display area     var v_width = $v _content.width ();    var len = $v _show.find (" Li ") .length;    var page_count = Math.ceil (len/i);   //as long as it is not an integer, take the smallest integer in the large direction           I F (! $v _show.is (": Animated")) {             　　if (page = = 1) {  //is already in the first layout, if you move forward, you must jump to the last layout.              $v _show.animate ({left: '-= ' +v_width* (page_count-1)}, "slow"); nbsp           page = page_count;           }els e{                     $v _show.animate ({left: ' + = ' +v_width}, ' slow ');                     page-- ;            }            $parent. Find ("span"). EQ ((page-1)). AddClass ("current"). Siblings (). Removeclass ("current");         }    })
   looks a lot of code is very complex, but in fact, the idea is very simple, is to get the left and right buttons, bind the order of the event, 
 
 in the event, then determine the location of the picture box, and then switch to the location to switch, this can be through 
 
 Change the Obj.style.left attribute implementation, how to know how much to move it? You can get his actual display box 
 
 width, and then define a counter that indicates where it was moved, multiplied by the last bit 
 
. Or simply explain it through the code. 
Window.onload = function () {    var next = Getelementsbyclassname ("Next") [0];   //Get Next page button   & nbsp var prev = getelementsbyclassname ("prev") [0];   //Get previous page button     var v_content = Getelementsbyclassname ("V_content") [0];     //Get the Display box, easy to get its width below     var v_list = getelementsbyclassname ("V_content_list") [ 0];      //The container that actually holds all the pictures     var v_span = getelementsbyclassname ("Highlight_tip") [0]. getElementsByTagName ("span");   //Decorative identification     var v_width = v_content.clientwidth;      //get the width of the box     var i = 4;      //Each time the number of pictures shown, here is 4    var len = Document.geteleme Ntsbytagname ("Li") .length;   //Get total images     var pagecount = Math.ceil (len/i);   // The total number of pictures divided by the number of pictures shown each time, you can figure out how many times you need to show     var page = 0;   //default setting is No. 0 page     var t;   //timer handle, with To clear the timer     Next.onclick = FunctioN () {        if (t) {            clearinterval (t) ;   //If there is, that is, the animation has been executed, first clear, to avoid conflict with the following animation to be performed or to create an animated queue effect         }        if (page = = pageCount-1) {         //When the last page is reached, move the animation to the end, and set the page ID to initial 0            t = Animate (v_list,{left:v_list.offsetleft},{left:-v _list.offsetleft-0},500,quad);            page = 0;      & nbsp; }else{            page++;   //Otherwise, the current page increases by 1, and the animation moves             t = Animate (v_list,{left:v_list.offsetleft},{left: (-page * v_width -V_list.offsetleft)},500,quad);        }        for ( var i = 0,l = V_span.length; I < L; i++) {   //Loop through the identity and set the identity             v_span[i].classname = ';        }        v_span[page].classname = "current";   }     Prev.onclick = function ( ) {   //Ibid         if (t) {             Clearinterval (t);        }        if (page = = 0) {            t = Animate (V_list,{left:v_list.offsetleft},{left: (-pagecount + 1) * v_ Width},500,quad);            page = 3;        } else{            page--;            t = Animate (V_list,{left:v_list.offsetleft},{left: (-page * v_width-v_list.offsetleft)},500,quad);        }        for (var i= 0,l = V_span.length; I < L; i++) {            v_span[i].classname = ';         }        v_span[page].classname = "current";   }} function Quad (Start, Alter,curtime,dur) {  return Start+math.pow (curtime/dur,2) *alter;   //animation algorithm Function}

function Animate (OBJ,START,ALTER,DUR,FX) {//"Animation execution function" var curtime = 0;       var interval = setinterval (function () {if (Curtime >= dur) {clearinterval (interval);       } for (Var i in start) {Obj.style[i] = FX (Start[i],alter[i],curtime,dur) + "px";   } Curtime + = 50;   },50); return interval;}  function Getelementsbyclassname (classname,node) {   //Get node function by class name     node = node | | document;  & nbsp if (node.getelementsbyclassname) {        return node.getelementsbyclassname (  ClassName);   }    var eles = node.getelementsbytagname (' * ');    var reg = [];    for (var i = 0,l = Eles.length; i < L; i++) {        if (Hasclass (Classname,eles[i])) {&nbsp ;           reg.push (eles[i]);        }   }     return reg;} function Hasclass (classname,node) {   //Determine if there are any class name functions, where the function above requires     var eles = Node.className.split (/\ s+/);    for (var i = 0,l = Eles.length; i < L; i++) {        if (eles[i] = = Class Name) {            return true;        }  & nbsp }    return false;}