如何在显示页面之前创建幻灯片？

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的例子。

好运