Question

我想在同一个位置显示几个相同大小的图像，一次一个，每次更改间隔5秒。为此，我使用了jQuery.Timer，它使用setInterval（）每5秒调用一些show_next_image（）函数。

它实际上可以与IE，Opera，Safara，Firefox和..部分与谷歌Chrome一起使用。如果我打开一个新窗口并直接输入我的网站网址，则无法使用谷歌浏览器：它将显示第二个图像并停止。在任何其他情况下（重新加载，从另一个链接重新加载，而不是在打开新窗口后），它将非常有用：可以在显示正面图像之前看到背面图像。

因此，我想知道我的JavaScript源代码是否有问题。我所做的是使用正面和背面图像。当我想显示下一个图像时，后面的img源设置为新图像，前面的图像淡出，后面的图像通过jQuery淡入。您可以在http://www.laurent-carbon.com/（法语）查看。这两个img用bg1和bg2标识。

var images = ["/img/IMG_0435bg.jpg", "/img/IMG_0400bg.jpg", "/img/maisonnette 2.jpg", "/img/IMG_0383bg.jpg", "/img/IMG_0409bg.jpg", "/img/IMG_0384bg.jpg"];
var idx = 1;
var waitTime = 5000; // ms

$(document).ready(function() {
    $("#bg2").hide();
    $.timer(waitTime, load_next);
    $.preLoadImages(images);
});

function load_next(timer) {
    var toshow = images[idx];
    idx++;
    idx %= images.length;

    back_image().attr('src', toshow);

    swap_images();
}

function front_image() {
    return (idx % 2 == 0) ? $("#bg1") : $("#bg2");
}

function back_image() {
    return (idx % 2 == 0) ? $("#bg2") : $("#bg1");
}

function swap_images() {
    back_image().fadeOut('slow');
    front_image().fadeIn('slow');
}

谢谢， Ceylo

Answer 1

答案：http://jsfiddle.net/morrison/RxyZY/

备注：

您正在尝试重新发明轮子。您正在创建一个简单的幻灯片。有很多插件可以做到这一点以及更多。我在我的示例中使用了jQuery cycle，即extremely customizable。

你应该把你的东西包裹在一个函数中，创建一个表达式。在我的例子中，(function($){}(jQuery))就是诀窍。它将变量范围限定在函数中，而不是全局命名空间。

Answer 2

好的，我已经找到了解决方案......没有使用插件。

演示

http://jsfiddle.net/morrison/PvPXM/9/show

源

http://jsfiddle.net/morrison/PvPXM/9/

这种方法更清晰，并且消除了我在Chrome中查看页面时遇到的问题：动画不同步并闪烁。

您在HTML中唯一需要做的就是将这两个图像包装在<div id="fadeBox" style="position:relative"></div>

中

$(function() {
    var images = [
        "http://www.laurent-carbon.com/img/IMG_0435bg.jpg",
        "http://www.laurent-carbon.com/img/IMG_0400bg.jpg",
        "http://www.laurent-carbon.com/img/maisonnette 2.jpg",
        "http://www.laurent-carbon.com/img/IMG_0383bg.jpg",
        "http://www.laurent-carbon.com/img/IMG_0409bg.jpg",
        "http://www.laurent-carbon.com/img/IMG_0384bg.jpg"
        ];
    var idx = 1;
    var max = images.length;
    var easing = "swing";
    var waitTime = 5000; // ms
    var fadeTime = 2000; // ms
    var fadeShow = function(fadeTime, fadeDelay) {
        var $topImage = $("#fadeBox img:last");
        $topImage.fadeTo(fadeDelay, 1, function() {
            $topImage.fadeTo(fadeTime, 0, easing, function() {
                $topImage
                    .fadeTo(0, 1)
                    .insertBefore("#fadeBox img:first")
                    .attr("src", images[++idx == max ? idx = 0 : idx]);
                fadeShow(fadeTime, fadeDelay);
            });
        });
    };

    fadeShow(fadeTime, waitTime);
});

希望这有帮助

PS感谢Levi稍微清理了一下代码。

Chrome并不总是使用JavaScript setInterval（）重复事件

2 个答案:

演示

源