借助jquery-backstretch插件实现网页背景图片自动轮播
竺勇
最近在做的一个项目需要用到背景图片的自动轮播效果，偶然看到了jquery-backstretch这个插件，于是分享一下学习的经验
下载地址和文档
下载地址： github地址，在git的地址中就有详细的文档。
同时在www.npmjs.com中也有该插件的文档，地址： npmjs文档地址
使用方法
第一步 - 引入jquery.js和jquery.backstretch.js
<script src="jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
第二步 - 获取添加轮播效果的容器
<div class="wrap"></div>
第三步 - 使用js插件
$(function(){
$('.wrap').backstretch([
"./components/img/index01.jpg",
"./components/img/index02.jpg",
"./components/img/index03.jpg",
"./components/img/index04.jpg",
"./components/img/index05.jpg",
], {
fade: 2000, //图像过渡的持续时间
duration: 10000 //每张图片之间的间隔时间
}
);
});
这三步完成后，自动轮播效果就添加完成了，十分简单，相比之前的几种方法更为简便。
在这里我制作的是一个全屏的轮播效果，在这里附上示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html, body{
width: 100%;
height:100%;
margin: 0;
padding: 0;
background-size: 100% 100%;
}
.wrap{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="wrap">
</div>
<script src="./components/js/jquery.min.js"></script>
<script src="./components/js/jquery.backstretch.min.js"></script>
<script>
$(function(){
$('.wrap').backstretch([
"./components/img/index01.jpg",
"./components/img/index02.jpg",
"./components/img/index03.jpg",
"./components/img/index04.jpg",
"./components/img/index05.jpg",
], {
fade: 2000, //图像过渡的持续时间
duration: 10000 //每张图片之间的间隔时间
}
);
});
</script>
</body>
</html>
类似资料：