The method of realizing the effect of focus graph carousel by JS _javascript skill

This paper illustrates the method of JS to realize the effect of focus graph carousel. Share to everyone for your reference, specific as follows:

The effect chart is as follows:

One, the use of knowledge points

1.DOM operation

2. Timer

3. Application of the event

4.Js Animation

5. Recursive function

6. Infinite Rolling Dafa

II. Structure and style

<div id= "banner" class= "banner" > <ul id= "List-banner" class= "List-banner fn-clear" style= "left:-624px"; > <li><a href= "#" ><" /a></li> <li><a href= "#" ></a></li> <li><a href=" # "></a></li> <li><a href= "#" ></a></li> <li><a href=" # "></a></li> <li><a href=" # "></a></li> </ul> <div class=" List-num -WP "> <div id=" list-nUm "class=" List-num fn-clear "> <a href=" # "class=" hover "></a> <a href=" # "></a> <a href= "#" ></a> <a href= "#" ></a> </div> </div> <div class= "left" &G
    T <a id= "Left" href= "#" ></a> </div> <div class= ' right ' > <a id= ' right ' href= ' # ' ></a&
  Gt

 </div> </div>

 Banner{position:relative;width:624px;height:200px;overflow:hidden; banner. list-banner{position:absolute;width:5000px. Banner. List-banner li{float:left;width:624px;height:200px; banner
. list-num-wp{position:absolute;bottom:7px;width:624px;height:11px} banner. list-num{width:100px;margin:0 Auto; . banner. List-num a{display:inline;float:left;width:11px;height:11px;margin:0 7px; Background:url (..
/images/list-num.png) No-repeat;} . Banner. List-num A:hover{background:url (.
/images/list-num-hover.png));} . Banner. List-num A.hover{background:url (.
/images/list-num-hover.png);} . Banner. Left A{display:block;position:absolute;width:49px;height:49px;top:75px;left:4px;background:url (.
/images/arrow.gif) 0 0;filter:alpha (opacity=50);-moz-opacity:.5;opacity:0.5;} . Banner. Right A{display:block;position:absolute;width:49px;height:49px;top:75px;right:4px;background:url (.

/images/arrow.gif) 0-49px;filter:alpha (opacity=50);-moz-opacity:.5;opacity:0.5;} 

Third, the script idea

1. First left and right button function

Window.onload=function () {
  var Prev=document.getelementbyid ("left");
  var Next=document.getelementbyid ("right");
  var List_banner=document.getelementbyid ("List-banner");
  Next.onclick=function () {
    list_banner.style.left=parseint (list_banner.style.left) -624+ ' px ';  Note: The UL of the HTML should add the row style left:0, otherwise here can't move up
  }
  prev.onclick=function () {
    list_banner.style.left=parseint ( List_banner.style.left) +624+ ' px ';
  }

2. The left and right button clicks two words very much like, encapsulates into the function

function animate (offset) {
    list_banner.style.left=parseint (list_banner.style.left) +offset+ ' px ';
}
Next.onclick=function () {
    animate ( -624);
}
Prev.onclick=function () {
    animate (624);
}

3. Unlimited scrolling

The practice of ① false maps

The picture is 412341, less than the last position, back to the first position, larger than the first position, pull to the last position

function animate (offset) {
  var newleft=parseint (list_banner.style.left) +offset;
  list_banner.style.left=newleft+ ' px ';
  if (newleft<-2496) {
    list_banner.style.left=-624+ "px";
  }
  if (newleft>-624) {
    list_banner.style.left=-2496+ "px";
  }
}

4. Small dots follow the left and right buttons to switch

var index=1;
function Showdot () {for
  (var i=0;i<list_num.length;i++) {
    list_num[i].classname= "";
  }
  List_num[index-1].classname= "hover";
}
Next.onclick=function () {
  animate ( -624);
  index++;
  if (index>4) {
    index=1;
  }
  Showdot ();
}
Prev.onclick=function () {
  animate (624);
  index--;
  if (index<1) {
    index=4;
  }
  Showdot ();
}

5. Click on small dot picture scrolling and small dot switch

for (Var i=0;i<list_num.length;i++) {
  list_num[i].onclick=function () {
    if (this.classname== "hover") { return
      ;
    }
    var myindex=parseint (This.getattribute ("index"));
    var offset=-624* (myindex-index);
    Index=myindex;
    Animate (offset);
    Showdot ();
  }

① point yourself do not execute the following code

Ii

<div class= "LIST-NUM-WP" >
    <div id= "List-num" class= "List-num fn-clear" >
      <a index= "1" href= " # "class=" hover ></a>
      <a index= "2" href= "#" ></a> <a index= "
      3" href= "#" ></a >
      <a index= "4" href= "#" ></a>
    </div>
</div>

The key is to get to the click of the first few pictures, can not be directly var Myindex=this.index; Because index is a custom attribute, Dom's own attributes can be obtained by point, and custom attributes are not available. getattribute () can get custom properties. You can also get the DOM's own properties

③ Update index value, Index=myindex;

6. Animation function (with a gradual process of motion)

function animate (offset) {animated=true;
    var newleft=parseint (list_banner.style.left) +offset;     var time=300;    Total displacement time Var interval=30;    Displacement interval time var speed=offset/(time/interval); Speed=speed>0 each move distance?    Math.ceil (Speed): Math.floor (speed); There may be decimals, rounding function go () {if (Speed < 0 && parseint (list_banner.style.left) >newleft) | | (Speed>0&&parseint (List_banner.style.left) <newleft))
        {//newleft target value list_banner.style.left=parseint (list_banner.style.left) +speed+ ' px ';  SetTimeout (Go,interval);
        Do more than one exercise (go function), advance every 30 milliseconds} else{animated=false;
        list_banner.style.left=newleft+ ' px ';
        if (newleft<-2496) {list_banner.style.left=-624+ "px";
        } if (newleft>-624) {list_banner.style.left=-2496+ "px";
}} go ();
    } next.onclick=function () {if (!animated) {index++;
    } if (index>4) {index=1;
    }Showdot ();
    if (!animated) {animate (-624);
    } prev.onclick=function () {if (!animated) {index--;
    } if (index<1) {index=4;
    } Showdot ();
    if (!animated) {animate (624);
        } for (Var i=0;i<list_num.length;i++) {list_num[i].onclick=function () {if (this.classname== "hover") {
      Return
      var myindex=parseint (This.getattribute ("index"));
      var offset=-624* (Myindex-index);
      Index=myindex;
      Showdot ();
      if (!animated) {animate (offset);

 }
    }
}

① a function that calls itself continuously after a condition is called recursion, where the animation effect of the function is realized by recursion animate

② Non-stop Point means to call the animate function, may cause cotton, picture brush, need optimization, introduce variable animated

7. Auto Play

function AutoPlay () {
    timer=setinterval (function () {
      next.onclick ();
    },1000)
}
function Stopautoplay () {
    clearinterval (timer);
}
Banner.onmouseover=stopautoplay;
Banner.onmouseout=autoplay;
AutoPlay ();

SetTimeout is executed only once and has been performed before because of recursion

SetInterval is every how much time

8. The optimization of false graphs

In practice, the picture must be stored sequentially, so the fake map is best generated by JS, rather than by itself written in HTML

var img_first=list_banner.getelementsbytagname ("Li") [0];
var img_last=list_banner.getelementsbytagname ("Li") [3];
List_banner.appendchild (Img_first.clonenode (true));
List_banner.insertbefore (Img_last.clonenode (True), List_banner.getelementsbytagname ("Li") [0]);

AppendChild is when the new node is added to the last child node of the target

InsertBefore is before the new node is added to an existing child node

CloneNode method, True for deep clones, false for Shallow clones, deep clones copy content from labels and labels, and shallow clones do not copy content

More readers interested in JavaScript-related content can view the site topics: "JavaScript switching effects and tips summary", "JavaScript Search Algorithm Skills Summary", "JavaScript animation effects and tips summary", " JavaScript error and debugging skills Summary, JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and skills summary and JavaScript mathematical calculation usage Summary

I hope this article will help you with JavaScript programming.