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

我正在试图制作一个幻灯片，将HTML页面输出到屏幕24/7。我有作品，但不同的幻灯片需要不同的时间间隔。我怎样才能做到这一点？使用jQuery无限循环播放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>

来源

2015-04-02 vonUbisch

'index === slides.length'永远不会是真的！您可能需要'index === slides.length - 1' – lshettyl 2015-04-02 09:14:03

您可以为幻灯片添加JSON，例如：var slides = [{“ImageName”：“Welcome”，“Time”：200}，{“ImageName”：“Image1 “，”Time“：5000}，{”ImageName“：”Image3“，”Time“：1000}，{”ImageName“：”Image4“，”Time“：500}，] //哪些幻灯片 – Ramkumar 2015-04-02 09:50:33

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

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

来源

2015-04-02 11:07:48

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

 
\t <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> 
 
\t <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 
 
\t //var slideObj = JSON.parse(slides); 
 
\t //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() { 
 
\t   if (index == slides.length) { // If at end 
 
\t \t 
 
      index = 0; // Start again 
 
     } 
 
     div.html("ImageName: "+slides[index].ImageName + "; Image Time Interval: "+slides[index].Time); // Load next one 
 
     index++; 
 
    } 
 
\t if(index==0) 
 
\t loop(); 
 
    setInterval(loop, slides[index].Time); 
 
}); 
 
</script> 
 
</html>

来源

2015-04-02 09:51:40 Ramkumar

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

回答

相关问题