我在我正在处理的网站上安装了easySlider 1.7。出于某种原因,无论我做什么,下一个和之前的按钮都不会显示出来。我对整个jQuery的东西并不陌生,但是在尝试了这么多不同的选项之后,我完全被难倒了。我有我的CSS代码,滑块的jQuery和我的html。请注意我在一个名为“banner.js”的独立.js文件中有滑块jQuery,我的CSS附加到主CSS文件。我真的可以忽略一些东西,但我一直在向上和向下看,在网络上寻找解决方案。提前谢谢!
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>
答案 0 :(得分:0)
这是我测试代码的链接。你拥有的和我拥有的唯一区别是图像和这些图像的文件路径。我想在这一点上可能存在文件路径问题。
http://d2burke.com/exp/es_test/
我一直使用这个插件甚至是extended it's functionality。如果您愿意,可以发布指向您的代码的链接。我很高兴看一看