Question

我正在尝试创建一个图像滑块，但由于某种原因，我无法解决为什么这不起作用。我基本上试图创建一个滑块，其中图像从右侧（屏幕外）进入，中心图像被推到左侧（屏幕外）。然后，当剩下的图像再次到达中心时，它会在返回中心之前再次向右移动。

jQuery（document）.ready（function（）{

var images = [];

//store the images in an array
jQuery('.main-image-slider').each( function () {
    images.push(jQuery(this));
});

var i = 0;
var max = images.length - 1;

setInterval( function () {
    if ( i > max) {
        i = 0;
    }

    images[i].removeClass('main-image-slider-left').addClass('main-image-slider-right').delay(100).queue(function () {
        images[i].removeClass('main-image-slider-right').addClass('main-image-slider-center').dequeue();
        i++;
    });


    if (images[i - 1]) {
        images[i - 1].removeClass('main-image-slider-center').addClass('main-image-slider-left');
    }


}, 3000);

}）;

Answer 1

我收到此控制台错误“Uncaught TypeError：无法读取属性 'removeClass'未定义“。

此错误是因为代码首先运行i++，然后运行images[i].removeClass('main-image-slider-right')...。

images[i].removeClass('main-image-slider-left').addClass('main-image-slider-right').delay(100).queue(function() {
  // the 'i' is already added 1, so it may equal images[max], so you got that error
  images[i].removeClass('main-image-slider-right').addClass('main-image-slider-center').dequeue();
});

您可以将i++移至queue：

images[i].removeClass('main-image-slider-left').addClass('main-image-slider-right').delay(100).queue(function() {
  images[i].removeClass('main-image-slider-right').addClass('main-image-slider-center').dequeue();
  // after all the animation is done, at the end of queue update 'i'. 
  i++;
});

你可以试试这个。

注意：不要忘记删除代码末尾的i++。

<强>更新

更新jsfiddle代码

在幻灯片的边缘，它不会使用if (images[i - 1])更新类，我们需要始终更新上一张幻灯片的类。所以我将代码更改为

images[i == 0 ? images.length - 1 : i - 1].removeClass('main-image-slider-center').addClass('main-image-slider-left');

JavaScript / jQuery图像滑块问题

1 个答案: