JavaScript/jQuery 图片滑块问题

Question

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

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++ 移动到 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 代码

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

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

JavaScript/jQuery 图片滑块问题

JavaScript/jQuery image slider issue

javascript

jquery

image

slider