Question

所以这是我的功能：

function homepageRotator()
{
    var numofimgs = $('#backgroundimageholder_home img').length;
    var index = 0;
//run the rotator
rotator();

function rotator()
{
    $('#backgroundimageholder_home img').eq(index).fadeIn('1000').delay(3000*3).fadeOut('1000');
    $('#contentcontainer_home ul li').eq(index).fadeIn('1000').delay(3000*3).fadeOut('1000');
    index = index + 1;

    if(index == numofimgs)
    {
        index = 0;
    }

    setTimeout(function() {rotator()},5000)
}
}

所以，我得到的是一个简单的旋转器，但旋转时间似乎不规则。首次加载时，没有任何时间正确，第一个图像出现，停留3秒然后切换。然后下一个消失，然后快速消失。最后，第3个保持6秒，然后显示第一个然后消失。基本上它非常不合理，我需要理解为什么。

感谢您的帮助。

好的，对不起我应该提供更多信息，所以这里是基本的html布局：

<div class="backgroundimageholder_home" id="backgroundimageholder_home">
    <?php foreach($front->result() as $row) { ?>
    <img src="images/homepage/<?php echo $row->image; ?>" alt="" class="backgroundimage_home" />
    <?php } ?>
</div>

<div class="contentcontainer_home" id="contentcontainer_home">
    <ul>

        <?php foreach($front->result() as $row) { ?>
        <li>
            <div class="contentcontainer_top_home clearafter" id="contentcontainer_top_home">
                <h2><?php echo $row->name; ?></h2>
                <p>
                    <?php echo $row->text; ?>
                </p>
            </div>

            <div class="contentcontainer_bot_home" id="contentcontainer_bot_home">
                <a href="<?php echo $row->link; ?>" title="">CLICK HERE TO VIEW</a>
            </div>
        </li>
        <?php } ?>

    </ul>
</div>

所以基本上我的旋转器旋转脚本，然后它还旋转一些标题，描述当时显示的图像。这就是我需要它们同时旋转的原因。我很确定有更好的方法可以做到这一点，但我无法理解。我真正想要诚实地想要的是，图像和标题之间存在延迟： - 淡入图像 - 延迟2秒 - 淡入标题 - 延迟5秒 - 淡出标题 - 淡出图像重复

但这让我大吃一惊。我几乎不能让它们正确旋转而没有任何重叠，等等......无论如何，一如既往，每个人的帮助都很受欢迎。

Answer 1

Javascript是异步的。当您开始使用超时时，这一点尤为明显。无论上次拨打setTimeout()是否已完成，您每隔5秒拨打rotator()就会拨打rotator()。

你的rotator()本身需要11秒才能完成（可能稍微多一点，因为这是两次通话）。您应该将超时设置为超过11秒。 12应足以使其平滑并使其保持一致。其次使用setInterval。这也有帮助。移除setTimeout功能中的rotator()来电，并在初次通话rotator()后将其设置（或删除初始通话，等待12秒，它也会启动）

setInterval(function() {rotator()},12000);

修改

解释setInterval

我需要帮助jQuery中的fadeIn（）fadeOut（）和delay（）的时间

1 个答案: