1

jQueryサイクルプラグインを使用してスライドショーを作成しようとしています。

スライドショーにはコンテンツがあり、コンテンツの中には基本的な画像ギャラリーがあります。

画像ギャラリーが使用するサイクルのタイムアウトは、コンテンツのタイムアウトよりも短くなります。したがって、コンテンツは15秒間待機し、画像ギャラリーには3秒のタイムアウトで5枚の写真が表示され、15秒後にコンテンツが変更されます。

すべて問題ないように聞こえますが、ページを実行すると、コンテンツと最初の画像ギャラリーが循環します。ただし、2番目のコンテンツにジャンプするときは、画像ギャラリーを循環しません。

このコードブロックを画像ギャラリーリピーターの上に配置しようとしました$('#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>
4

2 に答える 2

5

私があなたのコンセプトを理解しているなら、これはうまくいくはずです。正しく見えるようにするために必要なことの 1 つは、cycleContentwithの幅と高さを固定することoverflow:hiddenです。

編集クラスを使用するように2番目の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-17T16:58:00.587 に答える
0

これはどうですか ?(私はshureではありませんが...)end: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など)について心配する必要はありません。気にしないでください。

グリーティンクス、マイケル

于 2012-01-16T04:23:21.413 に答える