Native JS realizes uniform picture Carousel Animation _javascript Skill

JS implementation of the results of the Carousel map:

Demand:
1 Add dots based on picture dynamics
2 target move to small dot carousel picture
3 The mouse leaves the picture, the timing carousel picture; the mouse pauses on the picture
4 on both sides can click the Carousel picture

One, layout part

HTML section

 <div class= "W main clearfix" ><!--main Content section start--> <div class= "Slider" > <!----> <ul class= "IMGs" id= "Slider_imgs" > <li> </li> <li> </li> &l T;li> </li> <li> </li> <li> <li> </li> </ul> <di V class= "Arrow" id= "arrow" > <a href= "javascript:;" class= "Arrow_1" ><</a> <a href= "javascript: ; "class=" arrow_2 ">></a> </div> </div><!--Carousel Diagram part end--> </div> 

CSS Section

. slider Ul.imgs{height:453px;width:4380px;position:absolute;
Slider Ul.imgs li{display:block; width:730px;height:453px;float:left;
slider. circle{position:absolute;left:50%;bottom:8px}
. slider. Circle Li{cursor:pointer;float:left;width:18px;height:18px;margin:4px;background-color: #3e3e3e; Border-radius:50%;text-align:center;color: #fff;
slider. Circle Li.current{background:pink;color:white;}

JS part

1 This is the encapsulation of the Uniform animation function

/* ***obj: An animated DOM object
***target: The target position (x-axis) of the object's final motion (x axis)
/function animate (obj,target) {

// The timer clearinterval (obj) is first cleared per call
    . Timer);

According to the target position to determine the direction of movement, each to the target position step is 20, otherwise -20
    var speed = target>obj.offsetleft?20:-20;

    Obj. Timer =setinterval (function () {

      var left = Obj.offsetleft;

      Obj.style.left = left+speed+ "px";

      var result = Target-left;

The target position is within step 20 of the current position, and the target position
      if (math.abs (result) <=20) {

//stop motion
        clearinterval (obj) is reached. Timer);

There are 20 pixel gaps  we jump directly to
        the target position obj.style.left=target+ "px";

     }

    },2 function:

' Here write code piece 0 ';

  }

Carousel Diagram Package Function:

function slider () {//Focus Graph Information Dom node var imgs=document.getelementbyid ("Slider_imgs");
      var slides =imgs.parentnode;
      var lis =imgs.getelementsbytagname ("Li");
      var arrows = document.getElementById ("arrow");
      var Arrowlink=arrows.children;
      Create small dot var circle=document.createelement ("Ol");
      Circle.setattribute ("Class", "circle");

      Imgs.parentNode.appendChild (circle);
        for (Var i=0,len=lis.length-1;i<len;i++) {var li =document.createelement ("Li");
        li.innerhtml = i+1;
      Circle.appendchild (LI);
      //marginleft=-imgli (length) *olli (width)/2 Circle.style.marginLeft = ( -13*len) + "px";

      var ollis =circle.children;
      Ollis[0].classname= "Current";
        Add mouse event for small dots for (Var i=0;i<ollis.length;i++) {//Current small dot index ollis[i].index = i;
          Ollis[i].onmouseover=function () {for (Var j=0;j<ollis.length;j++) {ollis[j].classname = "";
         } This.classname= "Current";
     Picture Toggle IMGs CSS Part plus positioning animate (imgs,this.index* (-lis[0].offsetwidth));

        When the mouse moved to the timer, the current playback picture and the original position back to the original k=z=p=q=this.index;


      };
      //mouse move to the carousel graph, play slides.onmouseover=function () {//clear automatic Carousel Timer clearinterval (time);
};
      Mouse move, automatic carousel slides.onmouseout=function () {Time =setinterval (autoplay,1000);
};
      Timer part Var time=null,k=0,z=0;
      Time=setinterval (autoplay,1000);
        Auto-carousel picture, timer time function autoplay () {k++;
          if (k>lis.length-1) {imgs.style.left=0;
        k=1;
        } Animate (Imgs,k* (-lis[0].offsetwidth));
        z++;
        if (z>ollis.length-1) {z=0;
        for (Var j=0;j<ollis.length;j++) {ollis[j].classname = "";
      } ollis[z].classname= "Current";
      var Q=0;var p =;
        Arrowlink[1].onclick=function () {q++; if (q>lis.length-1) {imgs.style.left=0;
        Q=1;
        } p++;
        if (p>ollis.length-1) {p = =;
        for (Var j=0;j<ollis.length;j++) {ollis[j].classname = "";
        } ollis[p].classname= "Current";
      Animate (imgs,q* (-lis[0].offsetwidth));
 }


    }

  above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud-dwelling community.