Native js achieves infinite loop carousel image effects and js carousel Images

Native js achieves infinite loop carousel image effects and js carousel Images

Knowledge points

1. How to implement an infinite loop:

Determine whether to jump back to the first and last

You can also use loops to determine the current index value of an image.

Var newLeft = parseInt (list. style. left) + offset; // current offset + next offset = new offset list. style. left = newLeft + "px "; // current offset value = new offset value // determine whether to jump back to the first and last if (newLeft>-600) {list. style. left =-3000 + "px";} if (newLeft <-3000) {list. style. left =-600 + "px ";}

2. color-changing display of the bullets in the current image carousel:

Because index + 1 is clicked each time, the current index-1 is the index of the button.

// Clear onfor (var I = 0; I <buttons. length; I ++) {if (buttons [I]. className = "on") {buttons [I]. className = ""; break;} buttons [index-1]. className = "on ";

3. Implement the animation scroll effect:

The principle is to divide each offset into multiple completions. For example, if one 600px offset is used, the offset is divided into 10 times and the offset is 60px.

SetTimeout (go, 10) is required. // call the go function again within 10 milliseconds until the condition is not met.

Var newLeft = parseInt (list. style. left) + offset; // current offset + next offset = new offset var time = 300; // total displacement time var interval = 10; // displacement interval // animation effect custom formula: distance of each displacement = single offset distance/displacement times var speed = offset/(time/interval ); // recursive function until the condition is not met (jump to the secondary graph) // recursion divides the 600 offset into multiple completed offset functions go () {// speed <0 and current offset> the next offset is the offset to the left | otherwise, if (speed <0 & parseInt (list. style. left)> newLeft) | (speed> 0 & parseInt (list. style. left) <newLeft) {list. style. left = parseInt (list. style. left) + speed + "px"; // setTimeout (go, interval) for each displacement; // call the go function again in 10 milliseconds} else {animated = false; list. style. left = newLeft + "px"; // current offset value = new offset value if (newLeft>-600) {list. style. left =-3000 + "px";} if (newLeft <-3000) {list. style. left =-600 + "px ";}}}

4. Click the dot button to execute the animation:

How to obtain the current button location and then obtain the location of the button to be clicked

Use (Click -- current) *-600 = Positive and Negative distance to jump (left or right)

For (var I = 0; I <buttons. length; I ++) {buttons [I]. onclick = function () {if (this. className = "on") {return;} // convert the value of the index attribute to an integer var myIndex = parseInt (this. getAttribute ("index"); // offset =-600 * (location to be clicked-current location ), the current position is the result of the index loop var OS =-600 * (myIndex-index); // after the switch is complete, change the clicked index to the current index Position index = myIndex; showButton (); if (! Animated) {animate (OS );}}}

5. automatic playback:

Add an onmouseover event to the outer container and then call the setInterval method.

// Define the global variable for the method because function play () {timer = setInterval (function () {next is used when the method is stopped. onclick () ;}, 3000) ;}clearinterval (timer)

Complete code

Note: Replace the image link locally.

<! DOCTYPE html> 
The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!