jQuery 幻灯片下一个/上一个答案

【问题标题】：jQuery Slideshow Next/PreviousjQuery 幻灯片下一个/上一个
【发布时间】：2013-12-19 10:50:50
【问题描述】：

我是 jQuery 新手，我只是想知道创建下一个/上一个按钮以浏览幻灯片的最简单和最有效的方法。我的代码如下：

运行 = setInterval("switchSlide()", 2000); $(文档).ready(函数() { $('#slideshow img:gt(0)').hide(); $('#slideshow').hover(function() { 清除间隔（运行）； }，功能（） { 运行 = setInterval("switchSlide()", 2000); }); $('#play').click(function() { 运行 = setInterval("switchSlide()", 2000); }); $('#stop').click(function() { 清除间隔（运行）； }); $('#previous').click(function() { $('#slideshow img:first').fadeOut(1000).prev().fadeIn(1000).end().appendTo('#slideshow'); }); $('#next').click(function() { $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow'); }); }); 功能开关滑动（）{ $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow'); }

【问题讨论】：

下一个按钮的点击事件只是播放按钮的点击事件，但没有setInterval。
您能告诉我们您使用的是哪个幻灯片插件/脚本吗？
是的，你是对的，下一个按钮不是问题.. 上一个按钮呢？ @JonasG.Drange 我没有使用幻灯片插件。我想自己做。

标签： javascript jquery

【解决方案1】：

我假设 next() 会给你下一张图片，因为这是你在 switchSlide() 中所做的。您可以在 HTML 中添加 div 元素

  <div id="next"></div>

然后给它附加一个点击事件，该事件将调用next()，本质上执行与switchSlide()相同的操作

  $('.next').click(function(){ 
     $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
   })

以前的也可以这样

【讨论】：

你可以使用 .prev() 而不是 next 每当你寻找 jQuery 函数尝试使用 www.dochub.io 时，这是一个很好的资源
谢谢。我添加了这两个，但上一个按钮没有按预期工作。它不会转到以前的图像它只是转到另一个图像..不确定模式。
你能不能对你的代码做一点js摆弄，然后我们就可以通过它来处理它
jsfiddle.net/Zp6Xz/4 应该可以。我添加了 $('#previous').click(function() { $('#slideshow img:last').fadeOut(1000).prev().fadeIn(1000).end().prependTo('#slideshow '); })
但似乎仍然没有按正确的顺序进行 - jsfiddle.net/Zp6Xz/5