jQuery исчезает из списка элементов, затем перезапускается в начале

Question

У меня есть своего рода слайд-шоу - щелчок по изображению затухает и исчезает в следующем с помощью jQuery's .next() Когда он попадает в конец списка, он не пропускает назад в начало (естественно), потому что есть нет следующего элемента.

Что я могу добавить к своему коду, чтобы запустить его в начале после того, как он дойдет до конца?

Вот jsFiddle: http://jsfiddle.net/danielredwood/gBw9j/6/

Спасибо!

РЕДАКТИРОВАТЬ: изменил функцию постепенного исчезновения / постепенного появления, чтобы завершить постепенное исчезновение до перехода в следующий элемент

Вот мой текущий код

$('#two, #three, #four').hide();
$('.slide').click(function(){
    var $this = $(this);
    $this.fadeOut(600, function(){ $this.next().fadeIn(600); });
});

Answer 1

очень простое исправление.

скрыть # два и # три с помощью css

#two,#three {display: none;}

и измените Jquery на это

$('.slide').click(function(){
    $(this).fadeOut().next().fadeIn();
    $(this).insertAfter('.slide:last');
});

в основном после того, как вы спрятали первый, переместите его в конец.

обновленный пример в реальном времени: http://jsfiddle.net/XeCUf/

примечание: вам не нужно удалять

$('#two,#three).hide()

но я считаю, что лучше всего позволить CSS выполнять свою работу и использовать для презентации минимальное количество сценариев.

UPDATE

за ваш измененный вопрос я изменил свой ответ

$('#two, #three, #four').hide(); // <- consider moving to css
$('.slide').click(function() {
    var $this = $(this);
    $this.fadeOut(600, function() {
        $this.next().fadeIn(600);
        $this.insertAfter('.slide:last');
    });

* +1025 *});

и обновленный пример в реальном времени: http://jsfiddle.net/XbY3C/

Answer 2

var numOfItemsToFade = 1,
    numOfItems = $('ul li').length;
showList();
function showList() {
  $('ul li:nth-child('+numOfItemsToFade+')').fadeIn(500, function(){
    numOfItemsToFade++;
    if(numOfItemsToFade<= numOfItems){
      showList();
    }
  });
}

Answer 3

Вы можете попробовать это ??

$('#two, #three').hide();
$('.slide').click(function() {
    var $next = $(this).next();
    if ($next.length === 0) {
        $next = $(this).parent().first(); // or some other way of finding the first
    }
    $next().fadeIn();
});

Удачи ~

Answer 4

Возможно, есть лучший способ, но, похоже, он работает:

$('#two, #three').hide();
$('.slide').click(function(){
    var $next = $(this).fadeOut().next();
    if ($next.length > 0) {
        $next.fadeIn();
    } else {
        $("div.slide:first").fadeIn();
    }
});