Seamless slideshow and seamless slideshow

Seamless slideshow and seamless slideshow

When I do a carousel image, if the first and end of the image cannot be connected, the effect will be a bit ugly. The following describes a common method:

Here is a text description:

If you want to display five images, which are 1, 2, 3, 4, and 5, the code is introduced as follows: 1, 2, 3, 4, 5, and 1.

In this case, we will not talk about sequence-based carousel, focusing on 5> 1 and 1> 5.

I indicates the index of the current image.

Pre indicates the button of the previous image

Next indicates the button of the next image.

Ul indicates the image list

(1) 5> 1> 2... when the "next" button is rotated from 5 to 1, the current image is the second "1", the next image should be "2 ", when "next" is followed, the left value of ul is 0, I = 1;

(2) 1> 5> 4 .... when the "pre" button is rotated from the current image "1" (first 1) to image 5, the left value of ul is changed to-5 times of the img width, that is, let the first 1 be quietly changed to the last 1;

 

The expression is a bit messy. Put the code below:

<! DOCTYPE html>