javascript - 使用 jQuery 无限循环播放 HTML 页面幻灯片

Question

我正在尝试制作 HTML 页面的幻灯片，24/7 输出到屏幕。我所拥有的有效，但不同的幻灯片需要不同的间隔。我怎样才能实现这个目标？

输出是全屏的，带有固定页脚，显示 Logo 、一些消息和时间。

jQuery

$(document).ready(function () {
    var div = $('#content'); // Target iFrame
    var slides = ['welcome','movie']; // Which slides
    var time = 5000; // Default interval
    var folder = 'slides'; // Folder where the HTML slides are
    var extension = 'html';
    var index = 1; // Skip first (0), already loaded by default SRC from iframe
    $.ajaxSetup({
        cache: false // Maybe not neccesary any more, before I used a div and $.load() instead of iframe
    });
    function loop() {
        if (index === slides.length) { // If at end
            index = 0; // Start again
        }
        div.attr('src', folder + '/' + slides[index] + '.' + extension); // Load next one
        index++;
    }
    setInterval(function () {
        loop();
    }, time);
});

HTML

    <iframe id="content" src="slides/welcome.html" width="100%" height="100%" frameborder="0"></iframe>
    <div id="bar">
        <div class="row">
            <div class="col-lg-3">
                <img src="img/logo.png" alt="" id="logo">
            </div>
            <div class="col-lg-6">
                <div id="welcome">
                    Welcome <span>visitor</span>!
                </div>
            </div>
            <div class="col-lg-3">
                <div id="time"></div>
            </div>
        </div>
    </div>

Answer 1

使用setTimeout和按钮来启动和停止循环。

http://jsfiddle.net/nirmaljpatel/75tmnmbq/