我一直在试图实现snook.ca的最简单的jQuery幻灯片,但适用于<ul>
而不是一个简单的图像堆栈中的子元素。我已经成功地获得了通过必要的子元素旋转的幻灯片,但是当结束序列并返回到开头时,我已经用完了专有技术。jQuery幻灯片循环失败
我想要序列返回到第一个<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对于JSBin链接。感谢Doug, – SLaks 2010-02-19 04:01:05