簡單的滑塊jquery插件

Question

你好，我想實現一個網站，它有手風琴和滑塊。

它的工作原理是這樣的。第一個手風琴集合在負載下開放。該視圖端口中的滑塊是水平的。

第二套手風琴同樣的東西 但我不能在同一頁面上實現tw滑塊。

我使用以下插件：http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider

http://bakasura.in/delight/

Answer 1

我看到一對夫婦的問題。首先，您使用的是easySlider的錯誤版本。它看起來像你使用的是舊版本，而不是較新的1.7版本：http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

你也有手風琴和雙方的多個副本easyslider JavaScript文件在您的網頁：

<script type="text/javascript" src="js/jquery.accordion.js"></script> 
<script type="text/javascript" src="js/jquery.accordion.min.js"></script> 
<script type="text/javascript" src="js/easySlider.js"></script> 
<script type="text/javascript" src="js/easySlider.packed.js"></script> 

沒有必要這兩個，你需要選擇一個或其他：

<script type="text/javascript" src="js/jquery.accordion.min.js"></script> 
<script type="text/javascript" src="js/easySlider.js"></script> 

的另一個問題是，你有2套的上/下一個按鈕和他們每個人都有相同的ID值。您應該創建唯一的ID值，然後使用easyslider的prevId和nextId特點選擇正確的：

關於按鈕：

<div class="sub-next"><span id="aboutNextBtn"><a href="javascript:void(0);"><img src="images/control_next.png"></a></span></div> 
<div class="sub-prev"><span id="aboutPrevBtn"><a href="javascript:void(0);"><img src="images/control_back.png"></a></span></div> 

工作按鈕：

<div class="control-prev"> <span id="workNextBtn"><a href="javascript:void(0);"><img src="images/control_prev.gif" width="36" height="30"></a></span></div> 
<div class="control-next"><span id="workPrevBtn"><a href="javascript:void(0);"> <img src="images/control_nxt.gif" width="36" height="30"></a></span></div> 

新的jQuery代碼：

$("#slider").easySlider({ 
    prevId: 'aboutPrevBtn', 
    nextId: 'aboutNextBtn', 
    continuous: true, 
    controlsShow: false 
}); 

$("#workcase").easySlider({ 
    prevId: 'workNextBtn', 
    nextId: 'workPrevBtn', 
    controlsShow: false 
}); 

請注意controlsShow選項如何用於隱藏默認的cont easySlider的rols。