4

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

您可以提供的任何帮助将不胜感激。干杯。

4

1 回答 1

3

选择下一个后，只需断开链接即可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);
于 2010-02-19T03:45:16.937 回答