2012-04-12 53 views
0

我已經嘗試過在線搜索和瀏覽相關的「回答」的問題,但沒有什麼似乎很適合我的問題,所以我希望有人知道這個答案。jquery旋轉木馬 - 試圖添加自定義滾動條

我有一個網站,我正在編碼http://2938.sandbox.i3dthemes.net/index.html和我有carousel(carouFredsel)工作完美;不過,我想添加一個類似於這裏使用的滾動條http://finnrudolph.de/ImageFlow

我有圖像來製作滾動條,但是當涉及到Jquery時我是一個noob。我確實發現了一些向內容div添加jquery滾動條的信息,但他們要求divs是絕對的,爲了讓我的輪播以它的方式工作,它需要是相對的。

是我想做的可能嗎?

我很感激任何幫助,我可以得到這一點。

預先感謝您。

P.S.我試着讓代碼在JSfiddle中工作,但沒有成功,所以我提供了一個鏈接到沙盒。

這裏是頭裏面的腳本:

 <script type="text/javascript" language="javascript"> 
     $(function() { 

     $("#foo3").carouFredSel({ 
      items : 2, 
      auto: { 
       duration: 750 
       }, 
      scroll : { 
       items: 1, 
       duration: 750, 
      onAfter: function() { 
    if ($(this).triggerHandler("currentPosition") == 0) { 
    $(this).trigger("pause"); 
    } 
}}, 
     }).parent().css("margin", "auto"); 
     }); 

    </script> 

這裏是對傳送帶上的HTML:

<div class="list_carousel"> 
    <ul id="foo3"> 
<li style="width:486px"><img src="Images/SMP-3.jpg" alt="Testing description" /></li> 
<li style="width:486px"><img src="Images/SMP-6.jpg" alt="Text_2" /></li> 
<li style="width:238px"><img src="Images/SMP-4.jpg" alt="Text_6" /></li> 
<li style="width:486px"><img src="Images/SMP-2.jpg" alt="Text_3" /></li> 
<li style="width:238px"><img src="Images/SMP-5.jpg" alt="new description" /></li> </ul> 
<div class="clearfix"></div> 
</div> 

編輯:

我相信這是可能與使用鼠標輪插件很簡單。但是,我的原始問題是(現在仍然是)如何使滾動條的圖像顯示爲使用鼠標滾輪功能。圖像包含酒吧的行和沿酒吧移動的導航圈。

回答

0

爲什麼你不讀這個圖片庫的文檔,而不是搜索?

http://finnrudolph.de/ImageFlow/Documentation

+0

而不是被輕視我的問題......如果你讀了我的詢問,你會注意到,您發佈的鏈接是滾動條我想用不同的旋轉臺(該CarouFredsel)使用。命令會不同,他們不會嗎? – Leah 2012-04-12 17:14:07

+0

你可以使用jQuery UI的滑塊和自定義它,提到庫有一個滾動選項,http://caroufredsel.frebsite.nl/configuration.php,是不是適合你的圖片庫? – undefined 2012-04-12 17:31:11

+0

我正在使用滾動選項,但正如我所提到的,我對jquery很新,而且該網站並未解釋如何將滾動條添加到滾動選項。它只提供按鈕的配置。 – Leah 2012-04-12 17:37:02