Javascript Jquery随机滑块不'；不显示json数组中的所有图像

我正在编写我的第一个jquery代码，我必须编写一个随机滑块，它将通过一个php函数获取图像，并以一个带有装饰的序列显示它们。随机的事情是在php中完成的。我的jquery如下所示

function bannerSlide(){
     $.ajax({
    type: "GET",
    url: "test.php",
    dataType: 'json',
    success: function(images) {
      $.each(images, function (index, value) {
        $('#banner').slideUp(500).delay(2000).fadeIn(500).css('background', 'url(ItemPictures/'+value+')');
    });

    }
  });
}

我在

images

数组中获取图像，并在其中循环。 我面临的问题是，我的这段代码只显示数组中的最后一个图像。其他图像不会显示，它会不断滑动阵列的最后一个图像。 但是，如果我在

$中放入
警报
语句，则每个

函数在单击警报框的“确定”后图像都会发生变化，警报框将继续

我们将非常感谢您的帮助。

---

请不要建议使用一些已经构建好的滑块。

问题是您正在迭代图像数组，并且为每个图像设置相同DOM元素的背景<代码>$（“#横幅”）。这将发生得如此之快，以至于您只能在迭代结束时看到最后一张图像。这也是为什么如果您在两者之间执行

alert（）

，您可以看到它会发生变化，因为执行在

alert（）

期间暂停

你得想办法推迟背景的改变。您可以尝试的一件事是在

slideUp（）之前添加一个递增的延迟（）。比如：

function bannerSlide(){
  $.ajax({
    type: "GET",
    url: "test.php",
    dataType: 'json',
    success: function(images) {
      var duration = 2000;
      var element = $('#banner');
      $.each(images, function (index, value) {
        element.delay(index * duration).slideUp(500).delay(duration).fadeIn(500).css('background', 'url(ItemPictures/'+value+')');
        initialDelay += duration;
    });

    }
  });
}

这是一个丑陋的破解，但这就是为什么那些已经构建的滑块存在：）
每个
循环将在微秒内运行，并在每次通过代码时立即设置css值。因此，您只能看到最后一幅图像

下面是一个使用
setTimeout
并在第一个动画的回调中更改css的解决方案，这样css只能在适当的时间更改。您可能需要调整超时间隔
索引*3000

$.each(images, function(index, value) {
    setTimeout(function() {
        $('#banner').slideUp(500, function() {
            /* use callback of animation to change element properties */
            $(this).delay(2000).fadeIn(500).css('background', 'url(ItemPictures/'+value+')');
        })
    }, index * 3000);
});

使用元素的文本更改演示以下代码是发布问题的解决方案

function bannerSlide(){
  $.ajax({
    type: "GET",
    url: "test.php",
    dataType: 'json',
    success: function(imgs) {
      var cnt = imgs.length;
        $(function() {
            setInterval(Slider, 3000);
        });
        function Slider() {
        $('#imageSlide').fadeOut("slow", function() {
           $(this).attr('src', 'ItemPictures/'+imgs[(imgs.length++) % cnt]).fadeIn("slow");
        });
        }
    }
  });
}

其中，
imageSlide
是“banner”“div”内img标签的id