0

我正在尝试创建自己的幻灯片。以下代码从一个图像淡入到另一个图像。我想从 img1.jpg 循环到 img4.jpg 但我不确定每次更改后如何暂停。

                i++;
                temp = "img"+i+".jpg";
                $("#img").fadeOut(function() {
                    $(this).load(function() { $(this).fadeIn(); });
                    $(this).attr("src", temp);
                });

更新：我已将代码更改为以下内容。根据 John Boker 的建议，我将图像重命名为 img0、img1、img2、img3。它转到刚刚停止的第一、第二、第三图像。有任何想法吗？

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script>

            $(document).ready(function(){           
                var temp="";

                function slideshow(i)
                {
                    temp = "img"+i+".jpg";
                    $("#img").fadeOut(function() {
                         $(this).load(function() {
                                    $(this).fadeIn();
                                    // set a timeout of 5 seconds to show the next image;
                                    setTimeout(function(){ slideshow((i+1)%4); }, 5000);
                         });
                         $(this).attr("src", temp);
                    });
                }

                slideshow(0);


            });

        </script>
    </head>
    <body>
        <img src="img1.jpg" id="img"/>
    </body>
</html>
4

6 回答 6

2

看看这个例子......

$(function(){
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){$('.slideshow :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');}, 4000);
});

一把小提琴

如果您想在每个图像上暂停 8 秒而不是 4 秒，只需将脚本中的 更改4000为。8000

于 2012-05-31T17:32:13.993 回答
2

您可能应该在函数中使用它：

// show image i
function slideshow(i)
{
    temp = "img"+i+".jpg";
    $("#img").fadeOut(function() {
         $(this).load(function() {
                    $(this).fadeIn();
                    // set a timeout of 5 seconds to show the next image;
                    setTimeout(function(){ slideshow((i+1)%4); }, 5000);
         });
         $(this).attr("src", temp);
    });
}
于 2010-01-04T20:00:06.980 回答
2

You can do it like this, using setInterval:

$(function() {

    var i = 0;

    // Four-second interval
    setInterval(function() {
        $("#img").fadeOut(function() {
            $(this).attr("src", "img" + i++ % 4 + ".jpg");
            $(this).fadeIn();
        });
    }, 4000);
}

I've simplified a few things that might have been causing some of the other problems you're seing, removing the (seemingly superfluous) call to load inside your fadeOut callback and eliminating the unnecessary temp variable.

(Finally, if you aren't just doing this to learn, consider using one of the many excellent slideshow plugins out there, like Cycle.)

于 2010-01-04T20:01:17.710 回答
0

设置 window.setInterval(function, delay)为以设定的时间间隔调用函数以执行您拥有的代码。

有很多插件已经为您循环图像（除非挑战是自己编写），我特别喜欢的一个是循环插件。

于 2010-01-04T19:59:42.190 回答
0

看看这个jQuery 幻灯片问题

于 2010-01-04T19:59:59.210 回答
0

一个技巧是使用计时器将元素的属性设置为其当前值。

例如

$("#img").fadeIn().show(3000).fadeOut();

因为 $(this) 已经可见，添加.show(3000)意味着元素在淡出之前保持可见 3s

于 2010-01-04T20:33:08.677 回答