使用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頁面的幻燈片

回答

相關問題