背景插件之backstretch

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、效果图