Question

我一直在尝试实现snook.ca的最简单的jQuery幻灯片，但是当应用于<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);

您可以给予任何帮助，我将不胜感激。欢呼声。

Answer 1

选择下一个li后，请暂停链接。如果没有下一个li，则结果集的length将为0。当发生这种情况时，循环回到开头。然后，完成您的设置。以下是您的JSBin代码shows it working：

的修订版

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

jQuery幻灯片循环失败

1 个答案: