Javascript carousel Algorithm

The javascript carousel image algorithm is a common image Switching Effect on the homepage of a website. As a front-end developer, I believe many developers have directly called the encapsulated method in Jquery to achieve image carousel, easy to use. So I want to introduce the IMG implemented by javascript pure code.

HTML

 
 

  
  

  
  

  
  

  
  

  
  

  
  

  
  

 
 
12345

 
 

  
  

  
  

  
  

  
  

  
  

  
  

  
  

 
 
12345

I believe that the most confusing question here is, why should I add two images (li) at the beginning and end of the five images? For example:

Here, the example of scrolling left is used as an example.

Left:-2nd PX at the beginning of the layout; first in 2nd li, that is, 7th images. When we gradually scroll to the left to images, quickly Pull back to 2nd images and continue to scroll left. This looks like an hypothetical infinite left-side rolling loop. In fact, it consists of only seven images. Similarly, if we scroll to the right, we will first have 1st li (1st images) at the beginning of the layout. When we gradually scroll to the Right to 6th images, quickly Pull back to 1st images, and then continue to scroll to the right. In fact, the principle of up and down scrolling carousel images is the same, but the float: left attribute is missing, so that li can be vertically arranged.

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 of the Left carousel Chart" goes through the event for (var I = 0; i0? 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 acquisition function if (obj. currentStyle) {return obj. currentStyle [stylename];} else if (getComputedStyle (obj, false) {return getComputedStyle (obj, false) [stylename];}

The advantage of this location carousel algorithm is that it can be within the scope of my style, in the HTML

Add images in li unlimited, but remember to add the li image at the beginning and end, and change the style according to the image size to achieve image rotation.