建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:16收藏

简介

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