JavaScript/jQuery 图像 slider 问题

Question

fiddle :https://jsfiddle.net/8na2n5L2/

我正在尝试创建一个图像 slider ，但由于某种原因，我无法理解为什么这不起作用。我基本上试图创建一个 slider ，其中图像从右侧(屏幕外)进入，而中心图像被推到左侧(屏幕外)。然后，当左侧图像再次到达中心时，它会快速返回到右侧，然后再到达中心。

jQuery(文档).ready(函数(){

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

I get this console error "Uncaught TypeError: Cannot read property 'removeClass' of undefined".

这个错误是因为代码会先运行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++移动到队列中:

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');