jQuery幻灯片循环失败 [英] jQuery slideshow loop fail

问题描述

我一直试图实现snook.ca的最简单的jQuery幻灯片，但应用于< ul> 中的子元素时，而不是直接堆叠的图像。我已经成功地通过必要的子元素获得了幻灯片循环，但是当结束序列并返回到开始时，我已经用完了专有技术。

我希望序列返回到第一个< p> 子元素并继续循环。

您可以在 JS Bin 上查看正在运行的幻灯片演示。为jQuery代码的冗长道歉;我确信它可以被优化。

这里的后代是HTML：

 <报头GT; 
< nav> 
< ul> 
< li class =current> 
< h3> ...< / h3> 
< p>< img src =＃>< span> ...< a href =＃> ...< / a>< / span>< / p为H. 
< / li> 
< li> 
< h3> ...< / h3> 
< p>< img src =＃>< span> ...< a href =＃> ...< / a>< / span>< / p为H. 
< / li> 
< li> 
< h3> ...< / h3> 
将p为H.;< IMG SRC = ＃ ><跨度> ...< A HREF = ＃ > ...< / A>< /跨度>< / p为H. 
< / li> 
< li> 
< h3> ...< / h3> 
将p为H.;< IMG SRC = ＃ ><跨度> ...< A HREF = ＃ > ...< / A>< /跨度>< / p为H. 
< / li> 
< / ul> 
< / nav> 
< / header> 
  

这里是jQuery：

<$ p $（'.c'c）$（'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） ;

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

在选择下一个 li 后，打断你的链接。如果没有下一个 li ，结果集的长度将为 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）; 
  

I've been trying to implement snook.ca's Simplest jQuery Slideshow, but when applied to child elements inside a <ul> instead of a straightforward stack of images. I've successfully got the slideshow rotating through the necessary child elements, but I've run out of know-how when ending the sequence and returning to the beginning.

I'd like the sequence to return to the first <p> child element and continue in an endless loop.

You can see a demo of the slideshow in operation on JS Bin. Apologies for the verbosity of the jQuery code; I'm sure it could be optimized.

For posterity here is the 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>

And here is the 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);

Any help you could give would be much appreciated. Cheers.

解决方案

Just break your chaining after selecting the next li. If there is no next li, the length of the result set will be 0. When that happens, loop back to the beginning. Then, just finish your setup. Here is a revision on your JSBin code that 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幻灯片循环失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！