轻松滑块Jquery插件

Question

你好，我正试图实现一个网站，其中有手风琴和滑块。

它是这样工作的。第一套手风琴在装载时打开。视图中的滑动条是水平的。

第二组手风琴也是一样但是我不能在同一个页面上实现两个滑块。

我使用以下插件: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

你的页面中也有多个accordion和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功能来选择正确的Id值:

关于按钮:

<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选项是如何被用来隐藏easySlider的默认控件的。