Wie erstellt man eine Diashow, bevor die Seite angezeigt wird?

Question

Ich habe versucht, einen Weg zu finden, um eine Diashow zu erstellen und das Timing zwischen den einzelnen Bildern festzulegen. Nach der Sequenz möchte ich die Homepage anzeigen/anzeigen.

Ich habe nicht wirklich viele JavaScript-Erfahrung, so würde jede Hilfe geschätzt werden.

Answer 1

Es gibt viele Möglichkeiten, es zu tun, hier ist ein einfaches/einfaches Beispiel:

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>

Auch auf JSFiddle.

Answer 2

Sie sollten die setTimeout-Funktion verwenden, um die Zeit zwischen den einzelnen Funktionen einzustellen. Dann ändern Sie die Bilder mit Funktionen, um es wie eine Diashow aussehen zu lassen.

Beispiel: Ruft die Funktion nach 3 Sekunden auf, um eine Warnung auszugeben.

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

Sie können Millionen von Beispielen auf Google für das Timing mit JS finden.

Viel Glück