Как создать кнопку Next и Preview, используя 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().

Просто свяжите событие нажатия с вашими кнопками и включите функцию 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/

Docs:

• нажмите - http://jqapi.com/
• prependTo - http://jqapi.com/
• appendTo - http://jqapi.com/