嵌套的jQuery循环？

我正在尝试使用jQuery循环插件构建幻灯片放映。

在幻灯片放映中有内容，内容内有基本图库。

图库使用的周期超时少于内容超时。 所以内容等待15秒，图像库将有5个图片，3秒超时，然后15秒，然后内容更改。

一切听起来都不错但是当我执行页面时，它会循环内容和第一个图库。 但是当它跳转到第二个内容时，它不会循环图像库。

我试图把$('#cycleImages').cycle({...这个代码块在图库转发器上方但它没有用完。

如何让这些嵌套循环一起工作？ 谢谢

     $(document).ready(function() { $('#cycleContent').cycle({ fx: 'scrollRight', delay: -1000, timeout: 15000 }); }); $('#cycleImages').cycle({ fx: 'fade', speed: 500, timeout: 3000, pause: 1 });   

这是我的html标记

 
   
 
("Type.Name") %>
 
("Title") %>
 
 <asp:Repeater ID="rptBigPictures" DataSource='' EnableViewState="false" runat="server">  <asp:Image ID="imgProfile" runat="server" ImageUrl='' />   
 
    

Answer 1

如果我得到你的概念，这应该工作。 要使其看起来正确，您需要做的一件事是使用overflow:hidden固定宽度和高度的cycleContent 。

编辑我更改了第二个jquery选择器以使用该类。 因此标记不再具有cycleImages作为id。 由于您将重复它，您应该使用类来选择元素。

 jQuery(function($) { $('#cycleContent').cycle({ fx: 'scrollRight', timeout: 15000 }); $('.cycleImages').cycle({ fx: 'fade', speed: 500, timeout: 3000, pause: 1 }); }); 

我正在使用的CSS是这个，请注意宽度和高度是我的测试图像的大小。

 #cycleContent { width: 77px; height: 94px; overflow: hidden; } 

和标记，只是为了清晰。

Answer 2

那这个呢 ？ （我不是舒尔但是……）结束：function（）{…}应该正常工作

 $(document).ready(function() { $('.cycleImages').cycle(); // <- class in here var slideshow = $('#cycleContent').cycle({ // <- ID in here fx: 'scrollRight', speed: 'fast', timeout: 0, before: function() { $(this).cycle({ // <- new call of the inner fx: 'fade', speed: 'fast', timeout: 3000, autostop: true, end: function(){ slideshow.cycle('next'); } // <- new call of the outer }); } }); }); 

所以你不必担心内循环中的元素数量，3或5或者什么，不关心。

格雷特克斯，迈克尔