Блог

Главная - Вопросы по программированию - jQuery проходит по списку элементов, затем перезапускается в начале

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

#jquery #list #slideshow #fadein #fadeout

#jquery #Список #слайд-шоу #fadein #затухание

Вопрос:

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

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

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

Спасибо!

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

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

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

Ответ №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 выполнять свою работу и использовать минимальное количество сценариев для представления.

Обновить

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

 $('#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');
    });

});

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

Комментарии:

1. работает отлично.. но забыл опубликовать более новую версию моей функции fade out / fade in. отредактировал мой пост с правильной функцией

2. @technopeasant, я обновил свой ответ в соответствии с вашим обновленным кодом.

Ответ №2:

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

Ответ №3:

Мог бы быть способ получше, но этот, похоже, работает:

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

Ответ №4:

Вы могли бы попробовать это??

 $('#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();
});

Удачи ~