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

我做错了什么？

幻灯片是im img标签，id =“slides1”

我尝试了以下代码，但仍无效。

$("#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 attr设置为slide_2.jpg，对吗？如果是的话，你所做的是错的。您看到.delay与jQuery的fxQueue一起使用，jQuery是影响使用的函数队列，如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
    });

未经测试，但应该有效。告诉我，这不是你想要实现的目标。

Answer 2

试试这个，

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


        }
    );

Answer 3

您需要等到第一个图像加载后再执行脚本，尝试...

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

编辑：清理并更正代码

Answer 4

我能够成功创建此行为的唯一方法是在递归函数调用中链接两个setTimeout。

$(document).ready(function(){

    var images = ["resources/images/slide_1.png", "resources/images/slide_2.png"];
    var time = 1000;
    replace(0);

    function replace(counter){
        if( counter >= images.length)
            counter = 0;

        $("#slides1").attr("src",images[counter++]);
        $("#slides1").fadeIn(time);
        setTimeout(function(){
            $("#slides1").fadeOut(time);
            setTimeout(function(){
                replace(counter);
            }, time);
        }, time);   

    }
});