Vegas 幻灯片插件 - 如何延迟幻灯片开始的时间？

Question

我需要初始背景图像在幻灯片放映开始前的一段时间内保持可见运行。如何延迟幻灯片开始的时间？

我认为使用 setTimeout 方法应该可以，但不知道具体如何。

这是代码：

<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>

谢谢！

Answer 1

为了使用 setTimeout，请将您的幻灯片初始化脚本放入一个函数中，并为该函数命名，例如 "startSlideshow":

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

然后，配置超时以在指定延迟后调用该函数：

setTimeout(startSlideshow,3000);

示例如下：

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>

Vegas 幻灯片插件 - 如何延迟幻灯片开始的时间？

Vegas Slideshow Plugin - How can I delay the moment the slideshow starts?

javascript

background

delay

slideshow