jquery - 一次显示一个同级 Div - jQuery

Question

我设置了以下 HTML

<div class="container">
    <div class="box">Content</div>
    <div class="box">Content</div>
    <div class="box">Content</div>
    <div class="box">Content</div>
    <div class="box">Content</div>
</div>

我想在 .container div 中一次显示一个 .box div。淡入/淡出或滑入/淡出将是首选。一旦显示最后一个 .box div，它应该再次淡出到第一个。 .box div 的数量可能会有所不同。有时可能有 2 个，有时可能有 5 个。此外，稍微延迟 3-4 秒就很棒了。

我认为这对于 jQuery 来说应该是非常简单的，但我还没有找到我正在寻找的解决方案。我也无法使用任何插件。预先感谢您的帮助。

Answer 1

我认为您会想要使用 jQuery Cycle plug-in 。它有许多不同的过渡类型(包括淡入淡出和滑动)，并允许您在过渡之间选择时间延迟。

网站上的演示都是用图像完成的，但您可以拥有任何您喜欢的 html 内容，并且每个部分都会变成“幻灯片”。

编辑

我刚刚发现您无法使用任何插件，但我会将其留在这里供其他没有该限制的人使用。

编辑2

除非使用插件，请尝试以下操作:

$(function() {
    $('.container .box').css('position', 'absolute').filter(':not(:first)').hide();
    $('.container .box:first').addClass('shown');

    setInterval(transition, 4000);
});

function transition() {
    var current = $('.shown');
    var next = null;
    if (current.next('.box').size() == 0) {
        next = $('.container .box:first');
    } else {
        next = current.next('.box');
    }
    current.fadeOut().removeClass('shown');
    next.fadeIn().addClass('shown');
}

这是一个现场演示:http://jsfiddle.net/FvKAe/