JS实现无限轮播无倒退效果

让我来详细讲解一下如何实现无限轮播无倒退效果的javascript代码。

1、基本思路

实现无限轮播无倒退效果一般采用的方式是对图片进行重复补充，例如如果有n张图片，通常会将第n张图片补充到第一张图片的前面，将第一张图片补充到第n张图片的后面，这就实现了图片的循环轮播。同时，还需要对图片的切换进行优化，使得在切换时不出现倒退的情况，这可以通过改变left或top的属性值来实现。

2、代码示例

这里提供两个具体的代码示例：

示例一

在这个示例中，我们将图片嵌入到一个<ul>元素中，每个图片都被嵌入到一个<li>元素中。下面是完整的javascript代码：

var $carousel = $('.carousel');
var $imgList = $carousel.find('ul');
var imgWidth = $imgList.find('li').outerWidth(true);
var animateTime = 500;
var delayTime = 2000;
var timer = null;

// 复制图片
$imgList.append($imgList.html());

// 设置ul宽度
$imgList.css('width', imgWidth * $imgList.find('li').length);

// 自动轮播
timer = setInterval(function() {
    $imgList.animate({'left': '-=' + imgWidth}, animateTime, function() {
        if ($imgList.css('left') == '-' + imgWidth * ($imgList.find('li').length / 2) + 'px') {
            $imgList.css('left', 0);
        }
    });
}, delayTime);

首先获取carousel元素、图片列表元素、图片元素的宽度以及动画时间和延迟时间等参数。然后复制图片，在图片的后面插入和第一张图片相同的图片。接着设置图片列表元素的宽度，这里采用第一张图片的宽度乘以图片总数的方法，保证能够容下所有的图片。最后使用setInterval函数设置定时器来触发图片的轮播。在每次轮播时，先移动图片列表元素的位置，再根据位置是否回到初始位置进行判断与处理。

示例二

在这个示例中，我们将采用数组的方式存储图片，以及每一张图片的位置信息等数据。下面是完整的javascript代码：

var $carousel = $('.carousel');
var $imgList = $carousel.find('ul');
var imgWidth = $imgList.find('li').outerWidth(true);
var animateTime = 500;
var delayTime = 2000;
var timer = null;
var imgArr = [
    {'src': './img/img1.jpg', 'left': 0},
    {'src': './img/img2.jpg', 'left': imgWidth},
    {'src': './img/img3.jpg', 'left': imgWidth * 2},
    {'src': './img/img4.jpg', 'left': imgWidth * 3},
    {'src': './img/img5.jpg', 'left': imgWidth * 4},
    {'src': './img/img6.jpg', 'left': imgWidth * 5},
    {'src': './img/img7.jpg', 'left': imgWidth * 6},
    {'src': './img/img8.jpg', 'left': imgWidth * 7},
    {'src': './img/img9.jpg', 'left': imgWidth * 8},
    {'src': './img/img10.jpg', 'left': imgWidth * 9}
]

// 设置图片列表元素的宽度
$imgList.css('width', imgWidth * imgArr.length);

// 循环遍历imgArr数组，将图片动态添加到图片列表元素中
imgArr.forEach(function(item, index) {
    var $li = $('<li><img src="' + item.src + '" /></li>').css('left', item.left);
    $imgList.append($li);
});

// 自动轮播
timer = setInterval(function() {
    $imgList.animate({'left': '-=' + imgWidth}, animateTime, function() {
        if ($imgList.css('left') == '-' + imgWidth * imgArr.length + 'px') {
            $imgList.css('left', 0);
        }
    });
}, delayTime);

首先获取carousel元素、图片列表元素、图片元素的宽度以及动画时间和延迟时间等参数。然后定义一个数组imgArr，用来存储图片路径和位置信息等数据。接着设置图片列表元素的宽度，循环遍历imgArr数组，将图片动态添加到图片列表元素中，并设置每张图片的位置。最后使用setInterval函数设置定时器来触发图片的轮播。在每次轮播时，先移动图片列表元素的位置，再根据位置是否回到初始位置进行判断与处理。

3、总结

无限轮播无倒退效果的实现需要通过复制图片和设置图片位置等方式进行优化，使其在切换时不出现倒退的情况。上面的两个代码示例给出了两种实现方式，可以根据实际情况选择合适的方式进行实现。