Native JS picture Carousel effect realizes code _javascript skill

Now a lot of JavaScript plug-ins can achieve the function of the image carousel, this article, mainly through this domo to parse JavaScript image carousel principle.
The old rules, first the code. As for the code in the picture, casually find three can be, the core or understand its ideas.

Html:

<! DOCTYPE html> 
 
 

Css:

*{ 
 margin:0; 
 padding:0; 
} 
#wrapper { 
 position:relative; 
 width:1200px; 
 margin:50px Auto; 
 Overflow:hidden; 
} 
#pointer { 
 clear:both; 
 Position:absolute; 
 right:500px; 
 bottom:15px; 
 width:180px; 
 height:2px; 
} 
#pointer span{ 
 Display:block; 
 Box-sizing:border-box; 
 Float:left; 
 width:50px; 
 height:1.5px; 
 margin-right:10px; 
 Border-radius:. 5px; 
 Background: #fff; 
 Opacity:. 5; 
 -webkit-opacity:. 5; 
 -moz-opacity:. 5; 
 Filter:alpha (opacity=50); 
} 
#pointer. active{ 
 opacity:. 8; 
 -webkit-opacity:. 8; 
 -moz-opacity:. 8; 
 Filter:alpha (opacity=80); 
} 
#box { 
 position:relative; 
 width:3600px; 
 Clear:both; 
} 
img{ 
 Display:block; 
 Float:left; 
 width:1200px; 
 height:337px; 

Javascript:

Window.onload = function () {//Get picture box var box = document.getElementById (' box '); 
 Get the box with page numbers var pointer = document.getElementById (' pointer '); Get all the pictures in the box var imglist = box.getelementsbytagname (' img ')//Get all the page numbers in the box var pointerlist = Pointer.getelementsbytagna 
 Me (' span '); 
 The width of the picture, positive and negative for the left and right loop var n =-1200; 
 Add one times the picture for the loop box.innerhtml = box.innerhtml+box.innerhtml; 
 Set the width of the box Box.style.width = imglist[0].offsetwidth*imglist.length+ "px"; 
 var timer = null; 
 Timer = setinterval (function () {scroll (box,n,pointerlist); 
 },3000); 
 Box.onmouseover = function () {clearinterval (timer); 
 } pointer.onmouseover = function () {clearinterval (timer); 
   } box.onmouseout = function () {timer = setinterval (function () {//Console.log (New Date ()); 
  Scroll (box,n,pointerlist); 
 },3000); //Set page number Click event for (Var i=0;i<pointerlist.length;i++) {pointerlist[i].index=i;//Set a parameter, invoke a page number below//If no parameters are set, the call page The code will call the last one directly, because we use the loop Pointerlist[i].onclick=fuNction () {for (Var j=0;j<pointerlist.length;j++) {pointerlist[j].classname= ';//Empty Activated class} move (Box, N (this.index))//Move picture this.classname= ' active ';//Activate clicked page number}}/** * cyclic scrolling function * @param {Object} box * @p 
  Aram {Object} N/function scroll (box,n,page) {//To determine whether to reach the critical point, that is, the middle part of box if (BOX.OFFSETLEFT&LT;=-BOX.OFFSETWIDTH/2) { 
 Box.style.left = "0px";//Start Afresh Console.log (' 0 '); } if (box.offsetleft%n!=0) {//Because when we switch browser tabs or switch to other software interfaces,//will affect setinterval, sometimes setinterval will increase for several seconds, where we have to add a judgment/ 
 /Only when it has finished a whole width of the picture, we do the next scrolling. 
  } else{PageScroll (box,n,page); 
 Move (Box,n+box.offsetleft); }/** * Scrolling page number function * @param {object} box * @param {object} N * @param {object} page/function pagescroll (box, 
 N,page) {//Directly through the picture box positioning to determine the page number value, but the page number value is before scrolling, so the following value to +1 using var index = Math.Abs (box.offsetleft/n); 
 Console.log (index); 
 for (Var i=0;i<page.length;i++) {page[i].classname= '; //judgment is not the last page, the words on the last page +1 to become 0; if (index<page.length-1) {page[index+1].classname= ' active '; 
 } else{page[0].classname= ' active '; }/** * Speed Shift * @param {object} Ele * @param {object} target/function Move (ele,target) {clearinterval (E 
 Le.timer); 
 Console.log (New Date ()); 
  Ele.timer = setinterval (function () {var step = (target-ele.offsetleft)/10; Step = step>0? 
  Math.ceil (STEP): Math.floor (step); 
   if (target==ele.offsetleft) {Console.log (New Date ()); 
  Clearinterval (Ele.timer); 
  else{ele.style.left = ele.offsetleft + step + "px"; 
}},30);  }

The HTML and CSS sections are still relatively simple and skip directly. The JavaScript section of the code comments are written in more detail, the following main explanation of the logical part.
The principle of image scrolling is to use the SetInterval function to carry out the continuous circulation of background images. To avoid discontinuity in the process of picture looping, the first thing to do is to copy the picture in JavaScript (one more time) and then, when it reaches the critical point, move the picture to its original position and then start the next round of loops.
In this domo, there are mainly four functions:

1, the outer control interval time function. this is easier to understand by looping through the function of a picture scrolling every few seconds through the setinterval function.
2, the middle-tier scrolling function. to determine whether the picture box reached the critical point, to determine whether the current state is in line with the next scroll (this condition is mainly to prevent the switch bounded by the impact of the setinterval function, the specific reason at the end).
3. Middle-tier page number scrolling function. basically have no difficulty, basically understand page number why +1 can.
4, Picture scrolling function. This has been written in a previous article has detailed explanation, no longer repeat, reference: http://www.jb51.net/article/95211.htm

Finally, a little about the setinterval of the underlying mechanism.

The execution events of our inner functions are normally 1-2s (tested), the outer loop requires 3s to be performed once, and the normal situation is no problem. However, when you switch the interface, the browser will have an impact on the SetInterval function, the event will be executed more than 3 sides, in the case of the end of the move to open another timer for the next picture scrolling, so there will be confusion.

JavaScript is single-threaded, and when you use the SetInterval function It's not really a pause, it's just a matter of suspending the event and continuing with the following event, and when this event is executed, if the browser does not currently have a task, it executes immediately, but if the browser has a task, Then there is a certain delay, which is why switching interfaces can have an effect on the time of the SetInterval function.

(about the SetInterval function of the understanding if there are errors, please correct me!) If you want to understand, you can also go to some of the great God's blog to see the setinterval function of the article)

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.