嵌套的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循環？

回答

相關問題