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 的源码大家可以看一看。