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 UI Accordion小部件正是您想要的。

Here是小部件的演示。

Answer 2

我认为你会想要使用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/

Answer 3

您可以设置此代码以在指定时间后按顺序滑动div：

var divs = $('div.box'), i = 0;

$(function(){
  $(divs[i++] || []).slideUp(1000, arguments.callee);
});

See the example

一次显示兄弟姐妹一个 - jQuery

3 个答案: