jQuery幻灯片答案

【问题标题】：jQuery slideshowjQuery幻灯片
【发布时间】：2011-01-01 09:17:15
【问题描述】：

我正在尝试创建自己的幻灯片。以下代码从一个图像淡入到另一个图像。我想从 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>

【问题讨论】：

标签： javascript jquery image slideshow

【解决方案1】：

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

已经有很多插件可以为您循环图像（除非挑战是自己编写），我最喜欢的插件之一是cycle plugin。

【讨论】：

【解决方案2】：

看看这个jQuery slideshow question

【讨论】：

【解决方案3】：

您可能应该在函数中包含它：

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

【讨论】：

谢谢，它可以工作，但与 Jeff Sternal 的问题相同 - 它不会循环。 img4后如何返回img1。我无法使用 if 语句来执行此操作。
如果我是你，我会从 0 开始，所以使用模数会更容易。 (i+1)%4 会让你得到你的周期，所以如果 i = 3，(3+1)%4 = 0。你的图像将被命名为 img0.jpg、img1.jpg、img2.jpg、img3.jpg

【解决方案4】：

你可以这样做，使用setInterval:

$(function() {

    var i = 0;

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

我已经简化了一些可能导致您遇到的其他问题的事情，删除了在您的 fadeOut 回调中对 load 的（看似多余的）调用，并消除了不必要的 temp 变量.

（最后，如果您不只是为了学习，可以考虑使用众多优秀的幻灯片插件之一，例如 Cycle。）

【讨论】：

效果很好，但是如何循环，所以当它到达 img4 时，它又回到了 img1。我尝试了一个 if 语句，但无法让它工作。谢谢。
糟糕，我应该提到i 变量必须在函数外部初始化，这样它就不会在每次函数执行时都在本地范围内并重新初始化。修改后的代码应该可以工作！

【解决方案5】：

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

例如

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

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

【讨论】：

【解决方案6】：

看看这个例子...

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

A fiddle

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

【讨论】：