jquery简单的幻灯片

时间:2011-03-28 08:08:22

标签: jquery html animation

我正在尝试制作一个简单的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);

4 个答案:

答案 0 :(得分: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
    });

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

答案 1 :(得分:0)

试试这个,

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


        }
    );

答案 2 :(得分:0)

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

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

编辑:清理并更正代码

答案 3 :(得分:0)

我能够成功创建此行为的唯一方法是在递归函数调用中链接两个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);   

    }
});