Сбой цикла слайд-шоу jQuery - PullRequest
Новая
       16

Сбой цикла слайд-шоу jQuery

4 голосов
/ 19 февраля 2010

Я пытался реализовать простейшее слайд-шоу jQuery в snook.ca, но при применении к дочерним элементам внутри <ul> вместо простого стека изображений. У меня успешно получилось, что слайд-шоу вращается через необходимые дочерние элементы, но я исчерпал ноу-хау при завершении последовательности и возвращении к началу.

Я бы хотел, чтобы последовательность вернулась к первому <p> дочернему элементу и продолжилась в бесконечном цикле.

Вы можете увидеть демонстрацию слайд-шоу в действии на JS Bin . Извиняюсь за многословность кода jQuery; Я уверен, что это может быть оптимизировано.

Для потомков есть HTML: 

<header>
    <nav>
      <ul>
        <li class="current">
          <h3>...</h3>
          <p><img src="#"><span>...<a href="#">...</a></span></p>
        </li>
        <li>
          <h3>...</h3>
          <p><img src="#"><span>...<a href="#">...</a></span></p>
        </li>
        <li>
          <h3>...</h3>
          <p><img src="#"><span>...<a href="#">...</a></span></p>
        </li>
        <li>
          <h3>...</h3>
          <p><img src="#"><span>...<a href="#">...</a></span></p>
        </li>
      </ul>
    </nav>
  </header>

А вот и jQuery: 

$('header nav li').not('.current').children('p').hide();
   setInterval(function(){
     $('header nav li.current').children('p').hide()
     .parent('li').removeClass()
     .next('li').addClass('current')
     .children('p').show()
     .end();
   },3000);

Буду признателен за любую помощь, которую вы сможете оказать. Приветствия.

1 Ответ

3 голосов
/ 19 февраля 2010

Просто прервите цепочку после выбора следующего li. Если следующего li нет, length набора результатов будет 0. Когда это произойдет, вернитесь к началу. Затем просто завершите настройку. Вот ревизия вашего кода JSBin, которая показывает , что он работает : 

$('header nav li').not('.current').children('p').hide();
setInterval(function(){
  var $next = $('header nav li.current').children('p').hide()
  .parent('li').removeClass()
  .next('li');

  if(!$next.length) $next = $('header nav li:first');

  $next.addClass('current')
  .children('p').show();
},3000);
...