JQuery带轮播效果的网页全屏背景图插件vegas.js

简介

网页全屏背景jQuery插件 Vegas，它和其它背景插件不同之处就是带有幻灯片功能。幻灯片的切换有多种风格，如旋转、渐隐、左右等方式，切换的时候还有进度条显示。

使用

1.  引入文件

<link rel="stylesheet" href="http://jaysalvat.github.io/vegas/releases/latest/vegas.min.css">

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://jaysalvat.github.io/vegas/releases/latest/vegas.js"></script>

2.  HTML

<div class="vegas-slide vegas-transition-swirlRight vegas-transition-swirlRight-in" style="transition: all 2000ms ease 0s;">
  <div class="vegas-slide-inner vegas-animation-kenburns" style="background-image: url('img/4.jpg'); background-color: rgb(255, 255, 255); background-position: center center; background-size: cover; animation-duration: 6000ms;"></div>
</div>

3.  调用

<script>
  $('.static-banner').vegas({
    delay: 6000,
    timer: false,
    transitionDuration: 2000,
    slides: [{ src: 'img/4.jpg' }],
    transition: 'swirlRight',
    animation: 'kenburns'
  });
</script>

相关链接

官网地址 ：https://vegasjs.ooopener.com/

GitHub 地址 ：https://github.com/jakejive/vegas

在线演示 ：https://wow.techbrood.com/fiddle/6153