顯示動態內容的自動滑塊/滾動條

任何人都可以告訴我如何在我的網頁中實現自動滑塊/滾動條。滑塊應顯示來自數據庫的動態數據。（例如：plipl.com網站主頁（www.plipl.com）的熱門工作標籤）有沒有簡單的方法可以用jQuery做到這一點？顯示動態內容的自動滑塊/滾動條

來源

2009-04-27 Shyju

以下是沒什麼特別的，只是很快就試了一下。它有2個div可以連續切換，希望能給你一個良好的開端。您可以使用相同的想法並通過AJAX將內容加載到div中。

代碼片段：

CSS：

div{width:100px;height:100px;} 
#container{overflow:hidden;border:1px solid black;} 
#left{background:red;float:left;} 
#right{background:green;float:right;}

的JScript：

$(function() { 
     //Call scrollContent function every 3secs 
    var timerUp = setInterval(scrollContent, 3000); 

    function scrollContent(){ 
     //Toggle top between 100 and 0 
     var top = $("#container").scrollTop() == 0 ? 100 : 0; 
     $("#container").scrollTop(top); 
    } 
});

標記：

<div id="container"> 
     <div id="left"> 
      <ul> 
       <li>One</li> 
       <li>Two</li> 
       <li>Three</li> 
       <li>Four</li> 
      </ul> 
     </div> 
     <div id="right"> 
      <ul> 
       <li>Five</li> 
       <li>Six</li> 
       <li>Seven</li> 
       <li>Eight</li> 
      </ul> 
     </div> 
    </div>

來源

2009-04-27 19:20:49 Fermin

感謝femin，不幸的是，當我嘗試過時，這不起作用。我總能看到主div內的兩個div。你錯過了什麼在這裏張貼。也沒有轉換效果 – Shyju 2009-04-28 04:27:37

是的，這很容易從數據庫中抓取您的數據。讓我們說一個HotJob對象列表，每個對象都包含一些String字段，將每個對象轉換爲一個JSON對象（這是一個散列表），製作這些JSON對象的列表，使用你的Web框架X打印出JSON。

使用jQuery的的getJSON搶JSON對象遍歷每個HotJob和寫出來的信息

谷歌爲「jQuery的JSON卷軸」，並找到一些支持JSON開箱這樣做：。 http://www.logicbox.net/jquery/simplyscroll/flickr.html 當然，它的圖像，但你可以修改它來支持文本。

來源

2009-04-27 15:00:39 mkoryak

jCarousel是一個jQuery輪播插件，支持動態內容。儘管他的網站上沒有JSON驅動的示例，但使用jQuery的默認AJAX功能很容易實現。

這是迄今爲止我發現的最強大和可定製的輪播。

來源

2009-04-27 15:07:40

或者如果你不想使用插件，你可以使用jQuery的AJAX功能來加載數據，有一個溢出的div：隱藏和填充數據加載，一次只顯示一個部分。

然後，您可以使用setInterval()函數更改$（「＃container」）。scrollTop（xx）將下一組信息按設定的時間間隔移動到視圖中。你可以滾動它或突然彈出，直到你，但使用jQuery相當容易。

來源

2009-04-27 15:42:59 Fermin

能否請您給我提供一個示例代碼snipeet？ – Shyju 2009-04-27 17:30:56

顯示動態內容的自動滑塊/滾動條

回答

相關問題