Question

我有一个div，在里面我想一次显示3个文本。喜欢windows 8 metro主题。我有三个这样的div：

<div id='a'> Text 1</div> <div id='b'> Text 2</div> <div id='c'> Text 3</div>

和另一个包装所有这些的主要div。我希望在包装器中一次显示一个div，而不会从下到上发生任何事件，而新的一个滑过另一个。

PS：我已经看过如何使用image和css来做到这一点。但我想通过html而不是图像显示文本，有没有办法使用jquery这样做？谢谢。

Answer 1

HTML：

<div id="container">
    <div class="content">Some content here</div>
    <div class="content hidden">Other content here</div>
    <div class="content hidden">Yet more content here</div>
</div>

JavaScript的：

$(document).ready(function() {
    var interval = 2000; // 2 seconds
    var contents = $('#container').find('.content');
    var index = 0;
    var display = function(index) {
        $('.content:visible').fadeOut('fast', function() { $(contents[index]).fadeIn(); });
        index += 1;
        if (index > contents.length-1) {
            index = 0;
        }
        setTimeout(function() { display(index) }, interval);
    }

    display(index);
});

如何自动停止并在div内滚动？

1 个答案: