Question

我正在尝试制作一个全天候输出到屏幕的HTML页面幻灯片。我有什么作品，但不同的幻灯片需要不同的间隔。我怎样才能做到这一点？

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

的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

＆＃13;

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

＆＃13;

Answer 2

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

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

使用jQuery对HTML页面进行无限循环幻灯片放映

2 个答案: