Question

我遇到了一个简单的jquery幻灯片放映的问题（英语不是我的第一语言所以我会尝试解释它）。我有我的index.php，我使用jquery放置slideshow.html。这是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”替换为另一个幻灯片放映，除了图像之外，它与这个完全相同，问题是循环间隔不起作用正确地，它就像一个函数正在执行两次，或类似的东西。我已经在PHP之外测试了幻灯片放映并且它们工作正常，所以我猜测是PHP或加载/替换方法的问题HTML。

您可以在此处看到该项目：http://www.spamtv.com.ar/coya/index.php第一个幻灯片显示为slideshow0.html，点击“网络”即可加载下一个幻灯片（不起作用）

Answer 1

加载/替换幻灯片时，setInterval( "slideSwitch()", 5000 );定义的旧区间仍然设置并运行。每次加载新的幻灯片时，都会定义一个新的间隔，但不会删除旧的间隔。

您必须手动停止它们：

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

定义时：

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

简单的jquery幻灯片问题

1 个答案: