vegas.js 全屏响应式背景图轮播插件

Vegas 是一个令人惊叹的 jQuery 插件，可以为您的网页添加美丽的全屏背景。您还可以使用它为您的网页创建时尚的幻灯片。

使用方法

1. 在 HTML 文档中包含 jQuery 库和 jquery.vegas.js。

<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/vegas.min.js" type="text/javascript"></script>

2. 包含必要的样式表。

<link rel="stylesheet" href="css/vegas.min.css" />

Vegas初始化

<script>
$(function() {
$('body').vegas({
  slides: [
    { src: 'img1.jpg' },
    { src: 'img2.jpg' },
    { src: 'img3.jpg' }
  ]
});
}
</script>

更多的参数设置

可选参数说明

<script>
$('body').vegas({
  slides: [
  {
   // 图像路径
   src: null,
   // 背景颜色
   color: null,
   // 转换延迟
   delay: null,
   // 水平对齐
   // 右上角居中或左下角或百分比
   align: null,
   // 垂直对齐
   valign: null,
   // 转换类型：
   // fade, fade2, slideLeft, slideLeft2, slideRight
   // slideRight2, slideUp, slideUp2, slideDown
   // slideDown2, zoomIn, zoomIn2, zoomOut, zoomOut2
   // swirlLeft, swirlLeft2, swirlRight, swirlRight2
   // burn, burn2, blur, blur2, flash, flash2
   // or random
   transition: null,
   // 过渡持续时间
   transitionDuration: null,
   // 动画类型
   // 与转换类型相同
   animation: null,
   // 动画持续时间
   animationDuration:  null,
   // true 幻灯片图像会缩放以适合容器。
   // false 幻灯片图像完全显示。
   // repeat 重复幻灯片图像。
   cover: true,
   // 将视频添加到幻灯片中
   <a href="#">video</a>: {
     src: [],
     mute: true,
     loop: true
  }
  ]
});

</script>

自定义幻灯片的完整选项。

<script>
$('body').vegas({

    // 初始幻灯片
  slide: 0,

  // 转换延迟
  delay: 5000,

  // 无限循环
  loop: true,

  // 启用内容内容预加载
  preload: false,
  preloadImage: false,
  preloadVideo: false,

  //显示计时器栏
  timer: true,

  // 显示叠加层
  overlay: false,

  // 启用自动播放
  autoplay: true,

  // the array of slides is shuffled before.
  shuffle: false,

  // true 幻灯片图像会缩放以适合容器。
  // false 幻灯片图像完全显示。
  // repeat 重复幻灯片图像。
  cover: true,

  // 背景颜色
  color: null,

  // 右上角居中或左下角或百分比。
  align: 'center',
  valign: 'center',

  // 设置第一张幻灯片的过渡
  firstTransition: null,

  // s设置第一张幻灯片的过渡持续时间
  firstTransitionDuration: null,

  // 转换类型
  transition: 'fade',

  // 过渡持续时间
  transitionDuration: 1000,

  // 或者创建你自己的转换
  transitionRegister: [],

  // 动画类型
  animation: null,

  // d动画持续时间
  animationDuration: 'auto',

  // 或者创建你自己的动画
  animationRegister: [],

  // 删除之前保留在后台的幻灯片数量
  slidesToKeep: 1

});

</script>

回调函数：

<script>
$('body').vegas({

  init:  function () {},
  play:  function () {},
  pause: function () {},
  walk:  function () {},

});

</script>