如何在顯示頁面之前創建幻燈片？

Question

我一直在試圖找到一種方法來創建幻燈片並指定每張圖片之間的時間。然後在序列之後，我想顯示/顯示主頁。

我真的沒有太多的JavaScript經驗，所以任何幫助，將不勝感激。

Answer 1

有很多方法可以做到這一點，這裏是一個簡單/簡單的例子：

jQuery.fn.reverse = [].reverse; /* Just a helper */ 
 
var slideshowContainer = $('.slideshow'); 
 
var slideshowItems = slideshowContainer.find('.item').reverse(); 
 
var slideshowItemsTotal = slideshowItems.length; 
 
slideshowItems.each(function(i) { 
 
    var thisItem = $(this); 
 
    setTimeout(function() { 
 
     thisItem.fadeOut(1000, function() { 
 
      thisItem.remove(); 
 
      if(i+1==slideshowItemsTotal) { 
 
       slideshowContainer.remove(); 
 
      }; 
 
     }); 
 
    }, i*5000+4000); 
 
});

* { 
 
    margin: 0 none; 
 
    box-sizing: border-box; 
 
} 
 
.slideshow { 
 
    position: fixed; 
 
    z-index: 10; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
.slideshow .item { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Page header</h1> 
 
<p>Page content.</p> 
 
<div class="slideshow"> 
 
    <img class="item" src="http://placehold.it/800x600/00ff00/333" /> 
 
    <img class="item" src="http://placehold.it/800x600/ff0000/111" /> 
 
</div>

同樣在JSFiddle。

Answer 2

您應該使用setTimeout函數在每個函數之間放置時間。然後使用功能更改圖片，使其看起來像幻燈片。

例如：在3秒後調用該函數來發出警報。

function myFunction() { 
    setTimeout(function(){ alert("Hello"); }, 3000); 
} 

你可以找到數以百萬計的谷歌示例與JS的例子。

好運