Vegas Slideshow Plugin - Wie kann ich den Start der Diashow verzögern? - Javascript, Hintergrund, Diashow, Verzögerung

Ich brauche das anfängliche Hintergrundbild, um einige Zeit sichtbar zu bleiben, bevor die Diaschau läuft. Wie kann ich den Beginn der Diashow verzögern?

Ich denke, es sollte mit der setTimeout-Methode möglich sein, kann aber nicht genau herausfinden, wie genau.

Dies ist der Code:

<script type="text/javascript">
$(function() {
$.vegas({
loading:true,
src:"vegas/images/bg1_1.jpg"
});

$.vegas("slideshow", {
delay:6000,
backgrounds:[
{ src:"vegas/images/1_1.jpg", fade:1000,},
{ src:"vegas/images/2_1.jpg", fade:1000,},
{ src:"vegas/images/3_1.jpg", fade:1000,}
]
});
});
</script>

Vielen Dank!

Antworten:

Um zu verwenden setTimeout, fügen Sie Ihr Diashow-Initialisierungsskript in eine Funktion ein und geben Sie dieser Funktion einen Namen wie "startSlideshow":

function startSlideshow() {
// slideshow code goes here
}

Konfigurieren Sie anschließend ein Zeitlimit, um diese Funktion nach einer bestimmten Verzögerung aufzurufen:

setTimeout(startSlideshow,3000);

Beispiel unten:

function startSlideshow() {

// remove pre-slideshow message
$("p.message").remove();

// start slideshow
$.vegas("slideshow", {
delay: 6000,
backgrounds: [{
src: "http://lorempixel.com/400/200",
fade: 1000,
}, {
src: "http://lorempixel.com/300/200",
fade: 1000,
}, {
src: "http://lorempixel.com/400/250",
fade: 1000,
}]
});

}

$(function() {
setTimeout(startSlideshow, 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://vegas.jaysalvat.com/js/vegas/jquery.vegas.css">
<script type="text/javascript" src="http://vegas.jaysalvat.com/js/vegas/jquery.vegas.js"></script>

<p class="message">Slideshow starts in 3 seconds...</p>