无法从文档中设置维加斯幻灯片

Question

我尝试设置完整的背景滑块：http://vegas.jaysalvat.com/ 我已阅读文档并尝试设置。不幸的是没有成功。有没有人可以基本上告诉我这是如何工作的。我设置了一个简短的 js fiddle:

$("body").vegas({
 slides: [
  { src: "http://lorempixel.com/1600/800/sports/1/" },
  { src: "http://lorempixel.com/1600/800/sports/2/" },
  { src: "http://lorempixel.com/1600/800/sports/3/" }
 ]
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>KlickDummy Halunke</title>

    <link href="https://github.com/jaysalvat/vegas/blob/master/dist/vegas.css" rel="stylesheet"/>
   
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://github.com/jaysalvat/vegas/blob/master/dist/vegas.js"></script>
</body>
</html>

希望有人能在这种情况下帮助我。

非常感谢

Answer 1

希望这对您有所帮助...

从 'root' 中的 HTML 文件开始，'js' 文件夹中的个人 javascript 文件，'images' 文件夹中的图像，以及 'js/vegas' 文件夹中来自 Vegas Slideshow 的文件。

index.html
js/scripts.js
js/vegas/vegas.min.js
js/vegas/vegas.min.css
images/img01.jpg
images/img02.jpg
images/img03.jpg
images/img04.jpg

我不希望将幻灯片附加到 'body' 标签，因为这样移动它的自由度较低。因此，为 DIV 分配一个 ID，确保 DIV 大小正确，然后使用 javascript 为您的幻灯片启动图像和参数集合。

参见下面的示例。

/* Javascript js/scripts.js */

/* Placing your script in the '(document).ready' function will automatically start your slideshow on page load*/ 
$(document).ready(function() 
  {
    var imagecollection = [
        {src: 'images/img01.jpg'},
        {src: 'images/img02.jpg'},
        {src: 'images/img03.jpg'},
        {src: 'images/img04.jpg'}
        /* Slideshow not working? Check your image links. */
    ];

    $("#ShowSlideShowHere").vegas({
        slides: imagecollection,
        transition: 'fade',
        preloadImage: true,
        timer: true,
        shuffle: true,
        delay: 5000,
        animation: 'kenburns',
        cover: true
    });
  });

<!-- HTML SECTION -->

<!DOCTYPE html>
<html>
<head>
  <!-- Note: both Vegas css and Vegas js files are in the 'js/vegas' folder -->
  <!-- Vegas CSS reference -->
  <link rel="stylesheet" href="js/vegas/vegas.min.css">
  <!-- Vegas javascript reference-->
  <script src="js/vegas/vegas.min.js"></script>
  <!-- Your javascript reference -->
  <script type="text/javascript" src="js/scripts.js"></script>
  <!-- jQuery reference-->
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>
  <!-- Note: Do not use percentages in the height because otherwise it won't work in Firefox -->
  <div style="height:100vh">
    <div id="ShowSlideShowHere" style="height:100vh"></div>
  </div>

无法从文档中设置维加斯幻灯片

Can't setup vegas slideshow from documentation

jquery

background

slideshow

fullscreen