如何自動停止並在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); 
});​