2

我正在使用craftyslide jquery 插件http://projects.craftedpixelz.co.uk/craftyslide/。该插件用于构建幻灯片。我的网站使用 ajax 来加载内容。在我的 /#home 中，我有两张幻灯片/图片。

我遇到的问题是这个插件使用了 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 页面，则转换开始失败。我得到的不是两个图像，而是它似乎检测到 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>

当我执行 ajax 调用以加载#home 时，我正在使用一些 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() 取消正在进行的 Interval

请参阅此链接以供参考

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