1

単純なjqueryスライドショーに問題があります（英語は私の第一言語ではないので、説明しようと思います）。slideshow.htmljqueryを使用してを配置するindex.phpがあります。index.php、jquery、およびslideshow0.html

index.php

<body>
<div class="main">
    <div class="contenedorHeader">
        <?php include("header.html"); ?>
     </div>
    <div class="central">
        <div class="fondoDescription">
            <div id="contenedorDescription"></div>
        </div>
        <div id="slideshowHolder"></div>
    </div>
    <div class="footer"></div>
</div>
</body>

jqueryコード：

$(document).ready(function()
{
    $("#slideshowHolder").load("slideshow0.html");
});

slideshow0.html：

<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshowContent IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshowContent IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshowContent IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>
</head>

<body>
 <div id="slideshowContent">
            <img src="images/slideshows/home/image1.png" alt="Slideshow Image 1"  class="active"/>
            <img src="images/slideshows/home/image2.png" alt="Slideshow Image 2" />
            <img src="images/slideshows/home/image3.png" alt="Slideshow Image 3" />
        </div>
</body>
</html>

ご覧のとおり、slideshow0.htmlは「slideshowHolder」に読み込まれます。ここでは問題ありませんが、メニューの項目をクリックすると、「slideshow0.html」を画像以外はこれとまったく同じスライドショーに置き換える必要があります。問題は、ループ間隔が機能しないことです。正しくは、関数が2回実行されているようなものです。私は、PHPの外部でスライドショーをテストしましたが、正常に動作しているので、PHPまたはPHPのロード/置換方法に問題があると思います。 HTML。

ここでプロジェクトを見ることができます：http ：//www.spamtv.com.ar/coya/index.php最初のスライドショーはslideshow0.html、「ウェブ」をクリックして次のスライドショーをロードします（これは機能しません）

4

1 に答える 1

0

スライドショーをロード/置換すると、で定義された古い間隔setInterval( "slideSwitch()", 5000 );が設定され、実行されたままになります。新しいスライドショーをロードするたびに、新しい間隔が定義されますが、古い間隔は削除されません。

それらを手動で停止する必要があります。

$(document).ready(function()
{
    if (slideshowInterval) {
        clearInterval(slideshowInterval);
    }
    $("#slideshowHolder").load("slideshow0.html");
});

そしてそれを定義するとき：

$(function() {
    slideshowInterval = setInterval( "slideSwitch()", 5000 );
});
于 2012-12-26T15:25:51.407 に答える