如何使用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/

我刪除了計時器，並將click事件添加到了箭頭元素。
test()函數正確執行了下一步操作，我還原了prev()函數的圖像。

<a>元素<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