如何使用JQuery创建下一步和预览按钮?(图片画廊)

Question

小提琴到目前为止:

jsfiddle.net/hYEzV/993/

所以我正在寻找一个按钮，可以改变到下一个图像或预览图像等我不知道该怎么做……

我已经创建了前一个和下一个按钮已经在小提琴，他们只需要的功能，以改变到下一个或上一个图像。

感谢任何可以帮助和解释的人谢谢你。

编辑:我正在寻找它仍然自动播放，就像它正在做的那样，我只是在能够翻阅图像而不是等待计时器，如果这个人不想只是坐着等待和观看。我还需要右下角的链接按钮保持原样。

对于下一个按钮，我是这样想的:

$("#Stage_Next_Div_Button").click(function(){
  $(function(){
     $("#container img").first().appendTo('#container').fadeOut(1000);
    $("#container img").first().fadeIn(1000);
});
});

但是不知道如何做上一个按钮…

Answer 1

http://jsfiddle.net/hYEzV/998/

我删除了计时器，并为箭头元素添加了点击事件。
test()函数正在正确地执行下一个操作，我为prev()函数恢复了图像。

<a>元素是不相关的，你可以去掉它们

Answer 2

我不想讨论为什么你决定用这种奇怪的方式来写你的滑块。这不是做这件事的最好方法，但是……它的工作原理。

我坚持你的代码，并做了两个函数，next()和prev()。

只需将click事件绑定到按钮并触发next()或prev()函数。

$("#Stage_Next_Div_Button").click(function() {
    next();
});
$("#Stage_Previous_Div_Button").click(function() {
    prev();
});
function prev() {
    $("#Link a").last().prependTo('#Link').fadeIn(1000);
    $("#Link a").first().next().fadeOut(1000);
    $("#container img").last().prependTo('#container').fadeIn(1000);
    $("#container img").first().next().fadeOut(1000);
}
function next() {
    $("#Link a").first().appendTo('#Link').fadeOut(1000);
    $("#Link a").first().fadeIn(1000);
    $("#container img").first().appendTo('#container').fadeOut(1000);
    $("#container img").first().fadeIn(1000);
}

更新小提琴:http://jsfiddle.net/hYEzV/995/

文档:

• 点击- http://jqapi.com/#p=click
• prependTo - http://jqapi.com/#p=prependTo
• appendTo - http://jqapi.com/#p=appendTo