jQuery的週期施加到div來滾動其內容在一個循環中

我有這樣jQuery的週期施加到div來滾動其內容在一個循環中

<div id="screen"> 
    <div class="post">Post1......etc</div> 
    <div class="post">Post2......etc</div> 
    <div class="post">Post3......etc</div> 
    <div class="post">Post4......etc</div> 
    <div class="post">Post5......etc</div> 
    <div class="post">Post6......etc</div> 
    <div class="post">Post7......etc</div> 
    <div class="post">Post8......etc</div> 
    <div class="post">Post9......etc</div> 
    <div class="post">Post10.....etc</div> 
</div>

元件但在篩箱，大小被限制爲僅示出5個元素。所以首先會顯示Post1到Post5。休息是隱藏的溢出。間隔2秒，下一個元素應該通過向上滾動顯示。即2秒後screen的這個內容將向上滾動1個項目。現在它將顯示Post2到Post6。並且每2秒鐘循環一次。 Post10之後，Post1應該出現在Post2之後。

我不知道如何做到這一點。我閱讀jQuery循環的文檔：http://jquery.malsup.com/cycle/

但我沒有如何做到這一點。這種效果就像新聞滾動。

請幫

來源

2012-04-27 Vpp Man

jCarousel是一個漂亮的插件用於顯示代號！但是，您需要一些皮膚才能按照您的要求顯示它。

要使用jCarousel讓您的滾動器運行，您必須對當前的HTML結構進行一些修改。

我已經用無序列表替換了DIV類型結構。

<ul id="mycarousel" class="jcarousel jcarousel-skin-tango"> 
    <li>Post1......etc</li> 
    <li>Post2......etc</li> 
    <li>Post3......etc</li> 
    <li>Post4......etc</li> 
    <li>Post5......etc</li> 
    <li>Post6......etc</li> 
    <li>Post7......etc</li> 
    <li>Post8......etc</li> 
    <li>Post9......etc</li> 
</ul>

要在其非常基本的運行這個插件，你需要的腳本的jCarousel和CSS主題添加到您的網頁（我用的jCarousel的探戈主題）。

這裏是你如何使用插件：

$(document).ready(function(){ 
    $('#mycarousel').jcarousel({ 
     vertical: true, //Display a vertical carousel 
     auto: 2, //Scroll up automatically after every 2 seconds 
     scroll: 1, //No. of items to scroll up 
     visible: 5, //No. of visible items 
     wrap: 'last' //Go back to the 1st items after you've scrolled down to the last item 
    }); 
});

您將需要修改CSS的插件，雖然顯示它根據自己的需要。

下面是使用的jCarousel小提琴我創建：http://jsfiddle.net/kayen/VFdL8/

來源

2012-04-27 10:48:13 kayen

thanku。我可以在裏面使用div嗎？因爲它不是一個單一的文本。包含圖像和其他東西，如時間等格式的文字 – 2012-04-27 10:53:36

當然可以！它不限於文本，您可以在列表項中添加自定義HTML。但是您需要確保將元素的尺寸設置爲適合旋轉木馬窗口。 – kayen 2012-04-27 10:57:53

thanku。我會嘗試 – 2012-06-18 16:52:32

循環是錯誤的插件來用這個，因爲它只是在一次顯示一個圖像，它不會做滑動效果是你似乎什麼希望。嘗試的jCarousel這是相當受歡迎的，易於使用（很多例子和良好DOC）

http://sorgalla.com/projects/jcarousel/

一般規則，如果沒有一個演示接近你想要實現有很大的機會，什麼插件韓元沒有按預期工作。

來源

2012-04-27 10:27:39 GillesC

thanku。我正在看這個更新的手冊：https://github.com/jsor/jcarousel – 2012-04-27 10:52:33

jQuery的週期施加到div來滾動其內容在一個循環中

回答

相關問題