vegas 插件主要是基於 jQuery ，它是一種響應式的背景圖幻燈片輪播插件。當屏幕寬度減小時，輪播圖片高度不變，寬度自適應，上圖。
當縮小瀏覽器的寬度時：
其寬度縮小，高度不變。
veags 的下載地址：http://vegas.jaysalvat.com/documentation/transitions/
上述代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vegas-demo</title>
//引入vegas.css <link rel="stylesheet" href="../../Vegas-Background-SlideShow-plugin(background%20carousel)/vegas.min.css"> <style> *{ margin: 0; padding: 0; } #demo{ width: 100%; height: 480px; } </style> </head> <body> <div id="demo"></div> //基於jQuery，需要引入jQuery，之后引入vegas.js，注意順序 <script src="../../jq/jquery-3.2.1.min.js"></script> <script src="../../Vegas-Background-SlideShow-plugin(background%20carousel)/vegas.js"></script> <script> $(function(){
//調用vegas方法，其中slides是要顯示的背景圖片，src指示地址。 $("#demo").vegas({ slides:[ { src : './image/slide01.jpg' }, { src : './image/slide02.jpg' }, { src : './image/slide03.jpg' }, { src : './image/slide04.jpg' } ],
//vagas有兩種過渡方式，一種是transition，另一種是animation，另種方式各有很多的過渡效果。slideLeft2是transition中的一種 transition : 'slideLeft2' }); }) </script> </body> </html>
transition 的效果有：
fade fade2
slideLeft slideLeft2
burn burn2
slideRight slideRight2
slideUp slideUp2
slideDown slideDown2
zoomIn zoomIn2
zoomOut zoomOut2
swirlLeft SwirlLeft2
swirlRight swirlRight2
blur blur2
flash flash2
每個轉換都有兩個版本。通過transitionDuration選項可以設置毫秒數。
animation 的效果有：
kenburns
kenburnsUp
kenburnsDown
kenburnsRight
kenburnsLeft
kenburnsUpLeft
kenburnsUpRight
kenburnsDownLeft
kenburnsDownRight
random (隨機)
在官方網站上可以嘗試各種效果。
可以使用數組定義轉換的列表
transition : [ ' fade ', ' burn ' ]
也可以自定義轉換
轉換有3個類名，將其插入css中。
.vegas-transition-fade, .vegas-transition-fade2 {
//此處可以自己隨意設置效果 opacity: 0; } .vegas-transition-fade-in, .vegas-transition-fade2-in { opacity: 1; } .vegas-transition-fade2-out { opacity: 0; }
並且在轉換列表中添加自己的轉換
transitionRegister: [ 'myTransition1', 'myTransition2' ]
Animation 通過animationDuration選項可以設置毫秒數，其他的和transition原理都一樣。
設置自定義轉換時，需要使用幀動畫 @keyframes ，並且在轉換列表中添加：
animationRegister: [ 'myAnimation1', 'myAnimation2' ]
即可。
下載后可以嘗試嘗試，比較簡單，但是在響應式網頁設計時很實用！
vegas 的源碼大家可以看一看。