1

我遇到了一个简单的 jquery 幻灯片放映问题（英语不是我的第一语言，所以我会尝试解释它）。我有我的 index.php，我slideshow.html使用 jquery 在其中放置。这是 index.php、jquery 和slideshow0.html

索引.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");
});

幻灯片0.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”替换为另一个与此完全相同的幻灯片，除了图像，问题是循环间隔不起作用正确地，它就像一个函数执行了两次，或者类似的东西。我已经在 PHP 之外测试了幻灯片，它们工作正常，所以我猜是 PHP 或加载/替换的方法有问题HTML。

您可以在这里看到该项目：http ://www.spamtv.com.ar/coya/index.php第一个幻灯片是slideshow0.html，单击“web”以加载下一个幻灯片（不起作用）

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 回答