HTML 页的无限循环幻灯片放映 jQuery

Question

我正在尝试制作 HTML 页面的幻灯片，输出到屏幕 24/7。我的作品有效，但不同的幻灯片需要不同的时间间隔。我怎样才能做到这一点？

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

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

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
   <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  
</head>
<body>

 <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>
 <div id="content"></div>

</body>
<script>
$(document).ready(function () {
    var div = $('#content'); // Target iFrame
    var slides = [{"ImageName":"Welcome", "Time":200},{"ImageName":"Image1", "Time":5000},{"ImageName":"Image3", "Time":1000},{"ImageName":"Image4", "Time":500},]; // Which slides
 //var slideObj = JSON.parse(slides);
 //alert(slides);
    var time = 5000; // Default interval
    var folder = 'slides'; // Folder where the HTML slides are
    var extension = 'html';
    var index = 0; // 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.html("ImageName: "+slides[index].ImageName + "; Image Time Interval: "+slides[index].Time); // Load next one
        index++;
    }
 if(index==0)
 loop();
    setInterval(loop, slides[index].Time);
});
</script>
</html>

Answer 2

使用 setTimeout 和按钮开始和停止循环。

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

HTML 页的无限循环幻灯片放映 jQuery

Infinite looping slideshow of HTML pages with jQuery

javascript

jquery

loops

slideshow

setinterval