1、backstretch:一款背景插件,可以为任意元素添加动态调整大小、幻灯片式的背景图片。
2、引入方式
<script type="text/javascript" src="//cdn.bootcss.com/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
3、参数:
$.fn.backstretch = function (images, options)
// images:图片路径的字符串或字符串数组; //options.duration不同图片之间切换时长 //options.fade淡出时长 //option.speed淡出速度
3、使用方式:
<script type="text/javascript">
$.backstretch(
["framework/image/bg1.jpg",
"framework/image/bg2.jpg",
"framework/image/bg3.jpg",
],{
fade:750,duration:4000,speed:500
});
$("#btn1").click(function(e){
e.preventDefault();
$("#rd").backstretch("framework/image/bg4.jpg");
});
$("#btn2").click(function(e){
e.preventDefault();
$("#rd").backstretch("framework/image/bg5.jpg");
});
</script>
4、效果图