JavaScript Carousel Graph Algorithm _javascript skills

Carousel Map, is a common home page of a picture switching effect, as a front-end developer, I believe that many developers have directly called jquery in the packaging of a good way to achieve picture carousel, easy to save. So I would like to introduce the JavaScript Pure code implementation of the picture carousel.

Html

<div id= "CONTENT_IMG1" > <ul id= "img1" > <li></li> <li>< IMG src= "img/1.jpg"/></li> <li></li> <li></li> <li></li> <li></ li> <li></li> </ul> <span class= "MouseOver" style=: 300px; " >1</span> <span>2</span> <span>3</span> <span>4</span> <span>5 </span> </div> <div id= "Content_img2" > <ul id= "img2" > <li>
</li> <li></li> <li></li> <li></li> <li></li> <li>< IMG src= "img/5.jpg"/></li> <li></li> </ul> <span class= "mouseover" style= "margin-left:300px;" >1</span> <span>2</span> <span>3</span> <span>4</span> <span>5
 </span> </div>

Here I believe that the most doubt is that the five pictures why should be at the end of the two pictures (Li) To do the end of the echo? The reason for this figure is as follows:

This is illustrated by the example of scrolling left

At the beginning of the layout of the left: -470px, first in the 2nd Li is the 2nd picture, when we continue to scroll to the right to the 7th picture, quickly pull back to the 2nd chart, and then still scroll to the left. This looks like an imaginary infinite-left scrolling loop in which there are only 7 images. Similarly, if the implementation of scrolling to the right, when we start the layout, first in the 1th Li is the 1th picture, when we scroll to the right to the 6th picture, quickly pull back to the 1th chart, and then continue to scroll to the right. In fact, up and down rolling wheel broadcast diagram is the same, but less a float:left attribute, so that Li vertical arrangement.

Css

*{
margin:0;
padding:0;
List-style:none;
}
span{
width:20px;
height:20px;
Display:block;
Background-color:blanchedalmond;
border:1px solid black;
Float:left;
Text-align:center;
line-height:20px;
z-index:1;
Cursor:pointer;
margin:120px 8px 0 0;
}
span.mouseover{
background-color:orange;
}
#content_img1 {
position:relative;
width:470px;
height:150px;
BORDER:2PX black solid;
margin:30px Auto;
Overflow:hidden;
}
#img1 {
position:absolute;
top:0px;
Left: -470px;
Z-index:-1;
width:700%;
height:150px;
}
#img1 >li{
width:470px;
height:150px;
Float:left;
}
#content_img2 {
position:relative;
width:470px;
height:150px;
BORDER:2PX black solid;
margin:30px Auto;
Overflow:hidden;
}
#img2 {
position:absolute;
Top: -150px;
left:0px;
Z-index:-1;
width:470px;
height:700%;
}
#img2 >li{
width:470px;
height:150px;
}

JavaScript function method

Window.onload=function () {var Cont_img1=document.getelementbyid ("Content_img1"); var Spannum1=cont_
Img1.getelementsbytagname ("span");
var Img1=document.getelementbyid ("Img1");
var Cont_img2=document.getelementbyid ("Content_img2");
var spannum2=cont_img2.getelementsbytagname ("span");

   var Img2=document.getelementbyid ("Img2"); The span "button" mouse to the revolver map passes event for (Var i=0;i<spannum1.length;i++) {spannum1[i].index=i; spannum1[i].onmouseover= function () {for (Var p=0;p<spannum1.length;p++) {if (spannum1[p]==this) {spannum1[p].classname= "mouseover";}
else{spannum1[p].classname= "";}}
Cleartimeout (Img1.timer1);
Now=this.index;
 SCROLLIMG1 (IMG1,SPANNUM1);

   }///to the main function of the revolver call SCROLLIMG1 (IMG1,SPANNUM1); Passes the event for (Var i=0;i<spannum2.length;i++) {Spannum2[i].index=i to the Span "button" Mouse of the carousel graph; spannum2[i].onmouseover= function () {for (Var p=0;p<spannum2.length;p++) {if (spannum2[p]==this) {spannum2[p].classname= "mouseover";}
else{spannum2[p].classname= "";}}
Cleartimeout (Img2.timer1); Nows=thiS.index;
 Scrollimg2 (IMG2,SPANNUM2);

}///to the primary function of the SCROLLIMG2 call (IMG2,SPANNUM2);
 } var now=1; function Scrollimg1 (OBJ,SPANNUM1) {if (obj.offsetleft<=-(obj.children.length-1) *obj.children[0].offsetwidth) {/
 /reach the limit of the calculation position, both the last figure will immediately pull back to the original position now=0;
 obj.style.left=-(++now) *obj.children[0].offsetwidth+ "px"; }else{Moves (obj,-obj.children[0].offsetwidth* (++now), "left", 5,30);/or otherwise the picture is moving the buffered animation of the motion to the Ieft (Var i=0;i<
 spannum1.length;i++) {spannum1[i].classname= "";
 } spannum1[(now-1)%spannum1.length].classname= "MouseOver";
 Obj.timer1=settimeout (function () {//callback functions every 3 seconds to achieve an infinite loop of picture Carousel Scrollimg1 (OBJ,SPANNUM1);
 },3000);
 } var Nows=1; function Scrollimg2 (obj,spannum2) {if (obj.offsettop<=-(obj.children.length-1) *obj.children[0].offsetheight) {/
 /reach the limit of the calculation position, both the last figure will immediately pull back to the original position nows=0;
 obj.style.top=-(++nows) *obj.children[0].offsetheight+ "px"; }else{Move (obj,-obj.children[0].offsetheight* (++nows), "Top", 5,30)//Otherwise the picture moves to the left of the buffered animation} for (Var i=0;i< spannum2.length;i++) {Spannum2[i].classname= "";
 } spannum2[(nows-1)%spannum2.length].classname= "MouseOver";
 Obj.timer1=settimeout (function () {//callback functions every 3 seconds to achieve an infinite loop of picture Carousel Scrollimg2 (obj,spannum2);
 },3000); function Move (obj,target,stylename,average,cycle,continuefunction) {parameter type: (object, target value, changed style property, buffer factor (inversely proportional to size), Cycle time (
 The speed is inversely proportional to the size), and the callback function (dispensable) is clearinterval (Obj.timer); Obj.timer=setinterval (function () {if (stylename== "opacity") {var offvalue=math.round parsefloat (obj,
stylename)) *100);
 var speed= (target-offvalue)/average; Speed=speed>0?
 Math.ceil (Speed): Math.floor (speed);
 if (speed==0) {clearinterval (Obj.timer); if (continuefunction) continuefunction ();
 }else{obj.style[stylename]= (offvalue+speed)/100; obj.style.filter= "Alpha (Opacity:" + (Offvalue+speed) + ")";
 }else{var offvalue=parseint (GetStyle (Obj,stylename)); var speed= (Target-offvalue)/average; Speed=speed>0?
 Math.ceil (Speed): Math.floor (speed);
 if (speed==0) {clearinterval (Obj.timer); if (continuefunction) continuefunction (); }else{Obj.style[stylename]=offvalue+speed+ "px";
}}},cycle); } function GetStyle (obj,stylename) {//Object style property size Get function if (Obj.currentstyle) {return obj.currentstyle[stylename];}

 else if (getComputedStyle (Obj,false)) {return getComputedStyle (obj,false) [StyleName];}}

The advantage of this algorithm is that you can add an infinite number of Li images in the HTML <ul id= "img" ></ul> within the range of my style, but remember to use the back and forth of the Li Picture and change the style according to the picture size, will be able to achieve the picture carousel.

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