Question

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

它的工作原理如下。第一款手风琴套装是开放式的。该视图端口中的滑块是水平的。

第二套手风琴也是如此但是我无法在同一页面上实现tw滑块。

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

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>

另一个问题是你有两组prev / next按钮，它们每个都有相同的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的默认控件。

Easy Slider Jquery插件

1 个答案: