JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 带幻灯片效果的全屏背景jQuery插件:Vegas2

带幻灯片效果的全屏背景jQuery插件:Vegas2

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


幻灯片动画参数


在插件的文档页可以查看自带的切换动画效果及即时预览(点击查看)



使用方法:


STEP 1: 嵌入CSS样式表和JS


把VEGAS的CSS、JS以及jQuery插件嵌入到<head>内。


<head>

<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>

</head>


STEP 2: JAVASCRIPT设置,添加背景图片
<body>... HTML内容...<script>$('#example, body').vegas({ slides: [ { src: '/img/slide1.jpg' }, { src: '/img/slide2.jpg' }, { src: '/img/slide3.jpg' }, { src: '/img/slide4.jpg' } ]});</script></body>

另外建议看SETTING页面,查看更多插件的参数设置(点击查看)


插件就介绍到这里,如果在做全屏式的网页,可以使用这个背景插件,或许能给网页增加不少的气氛哦!


插件名称:Vegas

下载地址:http://vegas.jaysalvat.com/index.html

【带幻灯片效果的全屏背景jQuery插件:Vegas2】相关文章

1. 带幻灯片效果的全屏背景jQuery插件:Vegas2

2. 酷毙了!三种风格的全屏幻灯片效果

3. jquery全屏背景插件bgStretcher

4. HTML5的音频和JQUERY的全屏幻灯片

5. HTML5的音频和JQUERY的全屏幻灯片

6. 实现内容倾斜的 3D 幻灯片效果

7. 舒适的全屏式的弹窗jQuery插件 – animatedModal.js

8. CSS3系列教程:背景图片(背景大小和多背景图)

9. 一个独特的jQuery图片幻灯片插件AviaSlider

10. 使用jQuery和CSS3创建一个全屏幕幻灯效果

本文来源:https://www.51html5.com/a1515.html

点击展开全部

﹝带幻灯片效果的全屏背景jQuery插件:Vegas2﹞相关内容

「带幻灯片效果的全屏背景jQuery插件:Vegas2」相关专题

其它栏目

也许您还喜欢