jquery - Easy Slider Jquery 插件

Question

你好，我正在尝试实现一个具有 Accordion 和 slider 的网站。

它是这样工作的。第一套 Accordion 在加载时打开。该视口(viewport)中的 slider 是水平的。

第二组 Accordion 也一样 但是我无法在同一页面上实现两个 slider 。

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

另一个问题是您有两组上一个/下一个按钮，它们每个都有相同的 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 选项是如何用于隐藏 easySlider 的默认控件的。