JavaScript implements seamless scrolling effect of carousel images

This article mainly introduces the seamless scrolling effect of js carousel chart in detail, which has a certain reference value. Interested friends can refer to it

How to start and end the carousel chart when making it If they cannot be connected, the effect will be a bit ugly. Here is a method I commonly use:

Let me explain in words first:

If you want to display 5 pictures, they are 1, 2, and 3. ,4,5 So the introduction of the code is like this: 1,2,3,4,5,1

I won’t go into detail here about the sequential rotation. The main point is 5>1 and 1>5 carousel

i represents the index of the current picture

pre represents the button of the previous picture

next represents the button of the next picture

ul represents the picture list

(1) 5>1>2... When the "next" button goes from 5 to 1, it rotates normally in order, and when the current picture is the second "1" , the next picture should be "2", then when "next", the left value of ul is 0, i==1;

(2) 1>5>4.... When When the "pre" button rotates from the current picture "1" (the first 1) to picture 5, i==4, the left value of ul becomes -5 times the width of img, that is, the first 1 is quietly Becomes the last 1;

It’s a bit confusing to express it in language, so let’s put the code below:

 
 
 



 

 

  

  

  

  

  

  

 
 

  
  
  
  
  
 
 >
 <
 

 
 

The above is the entire content of this article. I hope it will be helpful to everyone’s study, and I hope you can support me a lot. Script House.

The above is the detailed content of JavaScript implements seamless scrolling effect of carousel images. For more information, please follow other related articles on the PHP Chinese website!