2


我正在编写我的第一个 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数组中的图像并循环遍历它。我面临的问题是我的这段代码只显示数组中的最后一个图像。其他图像未显示，它一直在滑动数组的最后一个图像。但是，如果我alert在函数中添加一个语句，$.each那么在我单击警报框的 ok 后图像会发生变化，并且它会继续。

任何帮助将不胜感激。
请不要建议使用一些已经构建的滑块。

4

3 回答 3

2

循环将each在微秒内运行，并在每次通过代码时立即设置 css 值。因此你只能看到最后一张图片

这是在第一个动画的回调中使用setTimeout和更改 css 的解决方案，因此 css 仅在适当的时间更改。您可能需要调整超时间隔index*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);
});

使用元素的文本更改的演示 http://jsfiddle.net/RrPu6/

于 2012-10-20T12:17:09.717 回答
2

以下代码是已发布问题的解决方案。

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 在哪里

于 2012-10-20T12:18:27.230 回答
1

问题是您正在迭代图像数组，并且为每个图像设置相同 DOM 元素的背景$('#banner')...。这将发生得如此之快，以至于您只能在迭代结束时看到最后一张图像。这也是为什么你可以看到它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;
    });

    }
  });
}

这是一个丑陋的黑客，但这就是那些已经构建的滑块存在的原因:)

于 2012-10-20T01:37:25.350 回答