简介

网页全屏背景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