jQuery easySlider 1.7 - 如何添加下一个和上一个按钮？

我在我工作的网站上安装了easySlider 1.7。出于某种原因，无论我做什么，下一个和上一个按钮都不会显示出来。我对整个jQuery并不陌生，但在尝试了很多不同的选项后，我完全陷入了困境。我有我的代码为CSS，滑块和我的HTML的jQuery。请注意我的滑块jQuery在一个名为“banner.js”的独立.js文件中，我的CSS被附加到主CSS文件。我真的可以忽略一些东西，但我一直在网上寻找解决方案。先谢谢你！jQuery easySlider 1.7 - 如何添加下一个和上一个按钮？

CSS：

#slider ul, #slider li{ 
     margin:0; 
     padding:0; 
     list-style:none; 
     } 
    #slider, #slider li{ 
     height:290px; 
     width:1024px; 
     overflow:hidden; 
     } 
    #slider{ 
     margin-left:0px; 
     } 
    #prevBtn, #nextBtn{ 
     width:30px; 
     height:77px; 
     float:left; 
     left:0px; 
     top:50px; 
     } 
    #nextBtn{ 
     left:1024px; 
     }              
    #prevBtn a, #nextBtn a{ 
     display:block; 
     width:30px; 
     height:77px; 
     background:url(../images/btn_prev.gif) no-repeat 0 0; 
     } 
    #nextBtn a{ 
     background:url(../images/btn_next.gif) no-repeat 0 0; 
     } 

          `

jQuery的滑动功能：

$(document).ready(function(){ 
    $("#slider").easySlider({ 
     auto: true, 
     pause:3000, 
     continuous: true, 
     controlsShow:true, 
     prevId:'prevBtn', 
     nextId:'nextBtn' 

    }); 
})`

的HTML标记：

<div id="wrapper"> 
<div class="nav"> 
</div> 
<div class="banner"> 
<div id="slider"> 
    <ul> 
    <li><img src="images/banner/img001.png" alt="001" /></li> 

    <li><img src="images/banner/img002.png" alt="002" /></li> 
     <li><img src="images/banner/img003.png" alt="003" /></li> 
    </ul> 
</div> 
</div> 
<div class="mxNav"> 
<p class="mxNavText"> Order Now! </p> 
</div>

来源

2012-02-08 emski.net

这里是哪里我测试你的代码的链接。你所拥有的和我拥有的唯一区别是这些图像的图像和文件路径。在这一点上，我会假设可能存在文件路径问题。

http://d2burke.com/exp/es_test/

我使用这个插件在所有的时间，甚至extended it's functionality。如果你愿意，可以发布一个链接到你的代码。我很高兴看看

来源

2012-02-08 15:30:12 d2burke

谢谢你看看！这绝对是一个菜鸟的错误，CSS中图像的路径是不正确的。我让他们都工作和风格。再次感谢您帮助我！ – 2012-02-09 13:02:45

任何时候，高兴的工作 – d2burke 2012-02-09 15:08:54

jQuery easySlider 1.7 - 如何添加下一个和上一个按钮？

回答

相关问题