有人可以帮助我添加此滑块的next和prev按钮。我发现这个代码在博客中,... 在这里,这个代码http://jsfiddle .net/dk5sy93d/使下一个简单的jQuery图像滑块,上一步按钮
回答
这是您的HTML的JS。
http://jsbin.com/nalewayume/1/edit?js,console,output
function nextSlide() {
if(currentSlide < allSlides) {
$slide.eq(currentSlide).fadeOut(200);
$slide.eq(currentSlide + 1).fadeIn(200);
currentSlide+=1;
}
}
如果你想要一个更先进的幻灯片,你应该看看owlgraphic.com/owlcarousel/ – 2015-04-04 16:41:11
控制按钮在第一张图像上隐藏'prev'并在最后一张图像上隐藏'next'。 – Marius 2015-04-04 16:45:38
我是新来的Jquery(从昨天起)。我必须在即将到来的Web开发竞赛中制作一个简单的滑块。这只是我写的东西,因为我似乎遇到的每件事都附有一个大型图书馆。如果你觉得它可以进一步简化这个答案
//Manual Slider Control Jquery
$("#slider-next").click(function(){
\t if($(".slider-a").is(":visible")){
\t \t $(".slider-a").hide(3000);
\t }else{
\t \t $(".slider-b").hide(3000);
\t } \t \t \t \t
});
$("#slider-prev").click(function(){
\t if(($(".slider-a").not(":visible")) && ($(".slider-b").is(":visible"))){
\t \t $(".slider-a").show(3000);
\t }else if(($(".slider-a").not(":visible")) && ($(".slider-b").not(":visible"))){
\t \t $(".slider-b").show(3000);
\t }
});
/* Slider CSS */
#slider-container{
margin:auto;
text-align:center;
}
#slider-content{
margin:auto;
height:300px;
width:400px;
overflow:hidden;
border:2px solid #000;
background-color:grey;
}
#slider-controls{
margin:auto;
text-align:center;
width:400px;
}
#slider-controls button{
background-color:#000;
padding:0 15px;
font-size:1em;
border-radius: 0 0 15px 15px;
color:white;
}
#slider-prev{
float:left;
}
#slider-next{
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider-container">
<div id="slider-content">
<img class="slider-img slider-a" src="http://www.light2015.org/.imaging/stk/pop/zoom/dam/CosmicLight/A-Universe-of-Images/Vela_Supernova_Remnant/jcr:content/Vela_Supernova_Remnant.2014-07-17-20-32-16.png" width="400px" height="300px" />
<img class="slider-img slider-b" src="http://www.sciuridae.co.uk/photography/images/blown_out_skies/two_images.jpg" width="400px" height="300px" />
<img class="slider-img clider-c" src="http://www1.hw.ac.uk/estate/images/landscape-images/cycleways-and-footpaths-big.JPG" width="400px" height="300px" />
</div>
<div id="slider-controls">
<button id="slider-prev">Previous</button>
<button id="slider-next">Next</button>
</div>
</div>
请发表评论,并提供相同的(如果不是改善)的功能。
添加显示()/隐藏()来它不是自动滑盖 – 2015-06-23 12:27:43
- 1. jquery图像滑块前一个按钮
- 2. 图像滑块的下一个按钮不起作用。 [JQUERY]
- 3. jquery简单图像滑块
- 4. 滑块下一步按钮问题
- 5. Jquery滑块下一个/上一个按钮
- 6. jQuery - 删除下一个,从滑块上一个按钮
- 7. 简单的jQuery滑块与按钮
- 8. 没有按钮的滑块 - 上/下一个li触发滑块
- 9. jQuery的 - 显示/隐藏滑块前prev /下一步按钮
- 10. 简单的jQuery图像滑块
- 11. 引导图像库模式下一步/上一步按钮
- 12. 使用单选按钮更改jquery滑块内的图像src
- 13. jquery滑块:下一个按钮,上一个按钮和分页对象在滑动时显示两次
- 14. jquery简单图像滑块瓦特/ ajax
- 15. 如何在滑块中不显示上一个按钮和下一个按钮?
- 16. 带有下一个/上一个链接的图像滑块
- 17. jQuery的内容滑块prev,下一步
- 18. 多个Jquery简单的滑块在一个页面上
- 19. jQuery的下一步和上一个按钮的工作
- 20. nivo滑块 - 下一个和prev图像
- 21. 创建一个jQuery图像滑块
- 22. 如何通过单击“下一步”按钮来显示下一个图像
- 23. 用于滑动滑块的自定义下一个按钮
- 24. 如何创建一个简单的jQuery图像滑块没有绝对位置
- 25. jquery单图像滑块
- 26. nivo悬停滑块显示上一页和下一页按钮
- 27. 有一个简单的JavaScript滑块吗?
- 28. JQuery图像滑块与滑下来
- 29. jquery步骤 - 想在最后一步显示下一个按钮
- 30. jQuery的滑块问题,禁用下一个按钮第一张幻灯片
http://jsfiddle.net/dk5sy93d/1/ – 2015-04-04 16:04:07