Question

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

＆＃13;

$("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/" }
	]
});

＆＃13;

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

＆＃13;

希望在这种情况下任何人都可以帮助我。

Thanx很多

Answer 1

希望这会有所帮助......

从您的HTML文件开始，在＆＃39; root＆＃39;中，您的个人javascript文件位于＆＃39; js＆＃39;文件夹，你的图像在＆＃39;图像＆＃39;文件夹，以及来自＆＃39; js / vegas＆＃39;中的Vegas幻灯片的文件。夹。

的index.html
JS / scripts.js中
JS /拉斯维加斯/ vegas.min.js
JS /拉斯维加斯/ vegas.min.css
图像/ img01.jpg
图像/ img02.jpg
图像/ img03.jpg
图像/ img04.jpg

我不希望将幻灯片放在＆＃39;身体上。标记，因为它让你移动它的自由度降低。因此，为DIV指定一个ID，确保DIV的大小合适，然后使用javascript为幻灯片显示一组图像和参数。

见下面的例子。

＆＃13;

/* 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
    });
  });

＆＃13;

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

＆＃13;

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

1 个答案: