嵌套的jQuery循环？

我正尝试用jQuery循环插件构建幻灯片放映。嵌套的jQuery循环？

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

图片库使用的周期超时少于内容超时。所以内容等待15秒，图片库将有5秒图片与3秒超时，这使得15秒内容改变。

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

我试图把$('#cycleImages').cycle({...这个代码块上面的图片库中继器，但它没有工作。

我怎样才能让这些嵌套的周期一起工作？谢谢

<head runat="server"> 
<script type="text/javascript" src="/Js/jquery-1.2.6.js"></script> 
<script src="/Js/jquery.cycle.all.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#cycleContent').cycle({ 
       fx: 'scrollRight', 
       delay: -1000, 
       timeout: 15000 
      }); 
     }); 
     $('#cycleImages').cycle({ 
      fx: 'fade', 
      speed: 500, 
      timeout: 3000, 
      pause: 1 
     });     
    </script> 
</head>

这是我的HTML标记

<div id="cycleContent"> 
      <asp:Repeater ID="rptContent" runat="server"> 
       <ItemTemplate> 
        <div> 
         <h2 class="slideShow-type">("Type.Name") %></h2> 
         <h2 class="slideShow-title">("Title") %></h2> 
          <div id="cycleImages"> 
           <asp:Repeater ID="rptBigPictures" DataSource='<%#Eval("Images") %>' EnableViewState="false" 
            runat="server"> 
            <ItemTemplate> 
             <asp:Image ID="imgProfile" runat="server" ImageUrl='<%#Eval("Path") + ".jpg" %>' /> 
            </ItemTemplate> 
           </asp:Repeater> 
          </div> 
        </div> 
       </ItemTemplate> 
      </asp:Repeater> 
     </div>

来源

2009-02-17 Barbaros Alp

如果我得到你的概念这应该工作。您需要做的一件事情是让cycleContent的固定宽度和高度与overflow:hidden一致。

编辑我改变了第二个jquery选择器使用类。因此，标记不再具有作为id的cycleImages。既然你会重复它，你应该使用一个类来选择元素。

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; 
}

和标记，只是为了清楚起见。

<div id="cycleContent"> 
    <div> 
     <div class="cycleImages"> 
      <img src="images/1.jpg" /><img src="images/2.jpg" /><img src="images/3.jpg" /><img 
       src="images/4.jpg" /><img src="images/5.jpg" /> 
     </div> 
    </div> 
    <div> 
     <div class="cycleImages"> 
      <img src="images/1.jpg" /><img src="images/2.jpg" /><img src="images/3.jpg" /><img 
       src="images/4.jpg" /><img src="images/5.jpg" /> 
     </div> 
    </div> 
</div>

来源

2009-02-17 16:58:00 Jab

谢谢我会尽快尝试 – 2009-02-17 17:08:53

这是怎么回事？（我不是舒尔但...）结束：函数（）{...} 应正常工作

$(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或什么，不在乎。

Greetinx，Michael

来源

2012-01-16 04:23:21 ddlab

嵌套的jQuery循环？

回答

相关问题