如何使用JQuery创建Next和Preview按钮？ （图片库）

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