2

私は craftyslide jquery プラグインhttp://projects.craftedpixelz.co.uk/craftyslide/を使用しています。このプラグインは、スライドショーの作成に使用されます。私の Web は ajax を使用してコンテンツをロードしています。私の /#home には、2 つのスライド/写真があります。

私が得ている問題は、このプラグインが setInterval() 関数を使用していることです。

// Auto mode
function auto() {
    setInterval(function () { 
    $slides.filter(":first-child").fadeOut(options.fadetime).next("li").fadeIn(options.fadetime).end().appendTo("#slideshow ul");

                $slides.each(function () {
                    if ($slides.is(":visible")) {
                        $(".caption").css("bottom", "-37px");
                        $(this).find(".caption").delay(300).animate({
                            bottom: 0
                        }, 300);
                    }
                });

            }, options.delay);
}

/#home にコンテンツをロードすると、すべて正常に動作します。しかし、/#offers のような ajax 呼び出しを使用して別のページを読み込んでから、/#home ページに戻ると、遷移が失敗し始めます。2つの画像の代わりに取得すると、4を検出したようです。もう一度同じプロセスを実行すると、6が表示されます。

おっしゃる通り、setInterval関数のおかげだと思います。以前に呼び出されたものと新しいものから setInterval をまだ実行しています。別のページをロードするときに setInterval() を削除する方法はありますか?

前もって感謝します！

追加情報: コンテンツは Ajax で読み込まれるため、コンテンツを読み込む前にヘッダー、フッターなどを読み込むためのテンプレートを使用しています。そのテンプレートは、HEAD 内で次のようにライブラリをロードしています。

<head>
<title>TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="fragment" content="!"/>
<script type="text/javascript" src="/js/ext.js"></script>
<script type="text/javascript" src="/js/craftyslide.js"></script>
</head>

#home をロードするために ajax 呼び出しを行うと、javascript を使用して HTML ドキュメントを取得しています。その JavaScript は、HTML コードの最後にあります。

<div id="slideshow">
    <ul>
        <li style="width:100%;">
            <img src="bg.jpg" height="400"/>
        </li >

        <li style="width:100%;">
            <img src="kk2_bg_optimized.jpg" height="400"/>
        </li>                         
    </ul>
</div>

<script type="text/javascript"> 
    $(document).ready(function(){ 
        // Load slide 
        $("#slideshow").craftyslide({
            'width': "100%", 
            'height': 400, 
            'pagination': false, 
            'fadetime': 500, 
            'delay': 3500
        });
});
</script>
4

2 に答える 2

2

clearInterval() を使用して進行中のインターバルをキャンセルします

参照用にこのリンクを参照してください

JavaScript で setInterval 呼び出しを停止する

于 2013-01-21T15:38:06.837 に答える
1

これを単一ページのサイトとして運営しているように聞こえますか? それが事実であり、AJAX 要求が前述のように HTML と JavaScript の両方を返す場合、ホームページに戻るたびに JavaScript を複合化し続けることになります。基本的に、ホーム ページに戻るたびに、スライドショーの別のインスタンスが開始されます。

CraftySlide プラグインはそれを変数に割り当てないため、使用して停止するsetInterval()ことはできません。clearInterval()また、API を介して開始されたスライドショーを停止する方法も提供していません。代わりに、グローバル変数を使用して CraftySlide が開始されたかどうかを追跡することを検討します。

<div id="slideshow">
    <ul>
        <li style="width:100%;">
            <img src="bg.jpg" height="400"/>
        </li >

        <li style="width:100%;">
            <img src="kk2_bg_optimized.jpg" height="400"/>
        </li>                         
    </ul> 
</div>

<script type="text/javascript"> 
    $(document).ready(function(){ 
        if(typeof(window.slideshowEnabled) == 'undefined' || window.slideshowEnabled == false){
            window.slideshowEnabled = true;

            // Load slideshow
            $("#slideshow").craftyslide({
                'width': "100%", 
                'height': 400, 
                'pagination': false, 
                'fadetime': 500, 
                'delay': 3500
            });
        } 
    }); 
</script>
于 2013-01-21T16:44:34.610 に答える