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

最新推荐文章于 2020-09-28 20:06:03 发布

Zhang_Zhi_Qiang_1

最新推荐文章于 2020-09-28 20:06:03 发布

阅读量847

点赞数

分类专栏： jquery

jquery 专栏收录该内容

0 篇文章

订阅专栏

由此转载

幻灯片动画参数

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

全屏背景 jquery插件

使用方法：

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页面，查看更多插件的参数设置（点击查看）

全屏网页背景