不能設置拉斯維加斯幻燈片從文件

我嘗試安裝完整的背景滑塊：http://vegas.jaysalvat.com/ 我讀過的文檔，並試圖建立。可惜沒有成功。有沒有人可以告訴我這是如何工作的。我已經成立了一個簡短的JS提琴：不能設置拉斯維加斯幻燈片從文件

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

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

希望有人能幫助我在這種情況下。

感謝名單了很多

來源

2015-10-29 codeFragment

希望這有助於...

開始與「根」您的HTML文件，在「JS」文件夾您的個人JavaScript文件，您的圖片在「圖像」文件夾以及來自'js/vegas'文件夾中的Vegas Slideshow的文件。

的index.html
JS/scripts.js中
JS /拉斯維加斯/ vegas.min.js
JS /拉斯維加斯/ 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>

來源

2015-12-13 17:17:45 Simmy

不能設置拉斯維加斯幻燈片從文件

回答

相關問題