Javascript slideshow algorithm and javascript Rotation Algorithm

Javascript slideshow algorithm and javascript Rotation Algorithm

Carousel images are common image switching effects 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, which is easy to use. So I want to introduce the IMG implemented by javascript pure code.

HTML

<div id="content_img1"><ul id="img1"><li></li><li></li><li></li><li></li><li></li><li></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><div id="content_img2"><ul id="img2"><li></li><li></li><li></li><li></li><li></li><li></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>

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; I <spannum1.length; I ++) {spannum1 [I]. index = I; spa Nnum1 [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) ;}// call scrollimg1 (img1, spannum1) to the left-Carousel main function ); // scroll up the span "button" of the carousel chart to the event for (var I = 0; I <spannum2.length; I ++) {spannum2 [I]. index = I; 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; scrollimg (img2, spannum2) ;}// call scrollimg (img2, spannum2) for the upstream carousel main function;} var now = 1; function scrollimg1 (obj, spannum1) {if (obj. offsetLeft <=-(obj. children. length-1) * obj. children [0]. offsetWidth) {// when the limit is reached, the initial position is immediately pulled back from the last graph. now = 0; obj. style. left =-(++ now) * obj. chi Ldren [0]. offsetWidth + "px";} else {Move (obj,-obj. children [0]. offsetWidth * (++ now), "left", 5, 30); // otherwise, the image is moved to the left as a buffer animation} for (var I = 0; I <spannum1.length; I ++) {spannum1 [I]. className = "";} spannum1 [(now-1) % spannum1.length]. className = "mouseover"; obj. timer1 = setTimeout (function () {// call back the function every 3 seconds to implement infinite loop image carousel scrollimg1 (obj, spannum1) ;}, 3000 );} var nows = 1; function scrollimg (obj, spannum2) {if (obj. offsetTop <=-(obj. Children. length-1) * obj. children [0]. offsetHeight) {// calculate the position that reaches the limit. When the last graph is used, it immediately pulls back the initial 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 image is moved to the left as a buffer animation} for (var I = 0; I <spannum2.length; I ++) {spannum2 [I]. className = "";} spannum2 [(nows-1) % spannum2.length]. className = "mouseover"; obj. timer1 = setTimeout (function () {// returns a function every 3 seconds Call to implement infinite loop image carousel scrollimg (obj, spannum2) ;}, 3000);} function Move (obj, target, stylename, average, cycle, continuefunction) {parameter type: (object, target value, changed style attribute, buffer factor (speed and size are inversely proportional), cycle time (speed and size are inversely proportional), callback function (optional )) clearInterval (obj. timer); obj. timer = setInterval (function () {if (stylename = "opacity") {var offvalue = Math. round (parseFloat (getStyle (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 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 my style range, add images in li to the HTML <ul id = "img"> </ul> without limit, but remember to add the li image at the beginning and end, you can change the style based on the image size to achieve image rotation.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.