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

Question

我尝试设置完整的背景滑块：http://vegas.jaysalvat.com/，我已经阅读了文档并尝试设置。不幸的是没有成功。有没有人能向我展示一下这是怎么回事。我做了个短小的小提琴：

​

$("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文件、‘图像’文件夹中的图像以及'js/ Vegas‘文件夹中的vegas文件开始。

• index.html
• js/scripts.js
• js/vegas/vegas.min.js
• js/vegas/vegas.min.css
• 图片/img01.jpg
• 图片/img02.jpg
• 图片/img03.jpg
• 图片/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>

​