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

Question

我有一个div，里面我想一次显示3个文本。像Windows 8地铁主题。我有三个div的是这样的：

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

和包装所有这些另一主要股利。我想在包装内一次显示一个div，而不会从下到上显示任何事件，并且新的一个会滑过另一个。 PS：我已经看到如何使用图像和CSS来做到这一点。但我想通过html显示文本而不是图像，是否有任何方式使用jQuery来做到这一点？谢谢。

Answer 1

一个基本的例子：http://jsfiddle.net/rNcNA/

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); 
});​