Вложенный цикл jQuery? - PullRequest
Новая
       9

Вложенный цикл jQuery?

1 голос
/ 17 февраля 2009

Я пытаюсь создать слайд-шоу с подключаемым циклом 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>

Ответы [ 2 ]

5 голосов
/ 17 февраля 2009

Если я понял вашу концепцию, это должно сработать. Единственное, что вам нужно сделать, чтобы он выглядел правильно, это иметь фиксированную ширину и высоту cycleContent с overflow:hidden.

Редактировать Я изменил второй селектор jquery для использования класса. Таким образом, разметка больше не имеет cycImages в качестве идентификатора. Поскольку вы будете повторять его, вы должны использовать класс для выбора элементов. 

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>
0 голосов
/ 16 января 2012

А как насчет этого? (Я не уверен, но ...) конец: функция () {...} должен работать правильно 

$(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, Майкл

...