Question

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

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

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或者什么，不关心。

Greetinx，Michael

嵌套的jQuery循环？

2 个答案: