jquery 简单的幻灯片

Question

我正在尝试制作一个简单的 jquery 幻灯片，但我做不到。

我正在使用以下代码，但我只得到第二张图片而不是第一张。

 $(document).ready(function(){
         $("#slides1").attr("src", "resources/images/slide_1.jpg");
         $("#slides1").fadeOut(1000);
         $("#slides1").delay(1000).attr("src", "resources/images/slide_2.jpg");
         $("#slides1").fadeIn(1000).delay(1000);
 }
);

我做错了什么？

slides 是一个带有 id="slides1"的 img 标签

我试过下面的代码，但还是不行。

$("#slides1").delay(500).attr("src", "resources/images/slide_2.jpg").delay(1000).fadeOut(1000).delay(1000).attr("src", "resources/images/slide_1.jpg").fadeIn(1000);

Answer 1

您希望在延迟 500 后将 src 属性设置为 slide_2.jpg，对吗？如果是，那么你所做的就是错误的。您会看到 .delay 与 jQuery 的 fxQueue 一起工作，它是一个由影响使用的函数队列，如 fadeOut 等，并且确实不影响 .attr 等与影响/动画无关的调用。所以你可以将回调函数传递给 .fadeOut 并在其中设置 src 属性，就像这样

$("#slides1")
    .attr("src", "resources/images/slide_1.jpg")  // show slide 1
    .delay(500)  // ...for 500ms
    .fadeOut(1000, function () {  // do fade out animation for 1000ms
        $(this)
            .attr("src", "resources/images/slide_2.jpg")  // show slide 2
            .fadeIn(1000)  // ...by fading in for 1000ms
            .delay(500)  // ...for 500ms
    });

未测试，但应该可以。如果这不是您要实现的目标，请告诉我。