JavaScript / jQuery圖像滑塊問題

Question

小提琴： https ： //jsfiddle.net/8na2n5L2/

我正在嘗試創建圖像滑塊，但是由於某些原因，無法解決為什么它不起作用的問題。 我基本上是在嘗試創建一個滑塊，其中圖像從右側（屏幕外）進入，而中心圖像被推到左側（屏幕外）。 然后，當該左圖像再次回到中心時，它又迅速回到右，然后再回到中心。

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