Question

我有一个javascript文件，它在图像之间循环并淡化它们。我目前正在使用2张图像，当第二张图像消失时，而不是第一张图像再次出现，我的容器空白5秒（当前超时）。但是，当图像再次循环时，容器不是空白的。

Javascript代码：

function thebackground()
{
    $('div.contain img').css(
    {
        opacity: 0.0
    });
    $('div.contain img:first').css(
    {
        opacity: 1.0
    });
    setInterval('change()', 5000);
}

function change()
{
    var current = ($('div.contain img.show') ? $('div.contain img.show') : $('div.contain img:first'));
    if (current.length == 0) current = $('div.contain img:first');
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.contain img:first') : current.next()) : $('div.contain img:first'));
    next.css(
    {
        opacity: 0.0
    })
        .addClass('show')
        .animate(
        {
            opacity: 1.0
        }, 1000);
    current.animate(
    {
        opacity: 0.0
    }, 1000)
        .removeClass('show');
};

$(document).ready(function ()
{
    thebackground();
    $('div.contain').fadeIn(1000); // works for all the browsers other than IE
    $('div.contain img').fadeIn(1000); // IE tweak
});

Answer 1

我认为我发现的主要问题是将更改函数包装在setInterval中，而 NOT 将其包装为字符串。我还希望将整个脚本包装在.ready()以及

中

setInterval(function () {change()}, 3000);

如果您想进行试验，请my example。我希望这回答了你的问题！： - ）

使用javascript淡化图像循环

1 个答案: