嵌套 jQuery 循环？答案

【问题标题】：Nested jQuery Cycle?嵌套 jQuery 循环？
【发布时间】：2009-02-17 15:28:02
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： .net asp.net jquery cycle

【解决方案1】：

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

编辑我更改了第二个 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;
}

还有标记，为了清楚起见。

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

【讨论】：

【解决方案2】：

这个呢？（我不舒尔，但...）结束：函数（）{...} 应该可以正常工作

$(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 之类的，不用在意。

你好，迈克尔

【讨论】：