Question

我用JQuery开发了下面的图像转换器：

var images = [];
images[0] = "image1.jpg";
images[1] = "image2.jpg";

var i = 0;
setInterval(fadeDivs, 3000);

function fadeDivs() {
    i = i < images.length ? i : 0;
    $('.slideshow-right-corner img').fadeOut(100, function(){
        $(this).attr('src', images[i]).fadeIn(100);
    })
    i++;
}

出于某种原因，它在本地工作正常，但是当我与我的网站集成时，它适用于阵列中的第一个图像并停止工作。以下是我检查元素时收到的错误：

未捕获的TypeError：undefined不是函数（索引）：398（匿名 function）（index）：398 E.complete jquery-1.3.2.min.js？ver = 3.4.1：19 o.fx.step jquery-1.3.2.min.js？ver = 3.4.1：19 F jquery-1.3.2.min.js？ver = 3.4.1：19（匿名函数）

Answer 1

问题是多线程。将在fadeOut函数之前评估i++。

因此当i = 2时images[2]将返回undefined，程序将停止工作。

尝试在淡入后将i++移到函数内部。

这是更新的代码（TESTED）：

function fadeDivs() {
   i = i < images.length ? i : 0;
   $('.slideshow-right-corner img').fadeOut(100, function() {
   $(this).attr('src', images[i]).fadeIn(100);
   i++;
});

Answer 2

正如@Stefano Altieri所说，i变量在fadeIn函数结束之前增加。将fadeDivs函数替换为：

function fadeDivs() {
    i = i < images.length ? i : 0;
    $('.slideshow-right-corner img').fadeOut(100, function(){
        $(this).attr('src', images[i]).fadeIn(100, function(){
            i++;
        });
    })
}

Answer 3

Working JSBIN DEMO

function fadeDivs() {
  $.each(images, function(e) {
     $('.slideshow-right-corner img').fadeOut(100,    function(){
        $(this).attr('src', images[e]).fadeIn(100);
    });
 });
}

您可以删除函数外的i变量。

JQuery脚本出错

3 个答案: