转自：http://blog.dvxj.com/pandola/jQuery_bgStretcher.html
bgStretcher 2011 (Background Stretcher)是一个jQuery的插件，可以为你的网页添加多张背景图，且多个背景图能够自动切换，同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡出，滚动，幻灯，其中选用滚动和幻灯时，可以选择方向，上下左右，或者左上右下，右上左下。图片切换顺序也可以设置正向，反向或者随机。更多选项就看你自己慢慢研究了。 插件特点：
脚本文件简洁，设置简单；支持所有新版浏览器；支持单张或者多张图片。
插件使用：
首先，你当然要把插件先下载再说，插件包里已经包含了所需要的JS文件。
然后，把下面的代码插入到你网页的<head>和</head>之间，这样后面才能使用插件，注意代码中的路径，至于是相对路径还是绝对路径看你实际需要。
1 |
<link rel="stylesheet" type="text/css" href="./main.css" /> |
2 |
<link rel="stylesheet" type="text/css" href="../bgstretcher.css" /> |
3 |
<script type="text/javascript" src="../jquery-1.5.2.min.js"></script> |
4 |
<script type="text/javascript" src="../bgstretcher.js"></script> |
接着把下面的代码，插入到上面代码之后，来初始化 bgStretcher 插件，要告知插件在哪个元素上起作用，同时可以配置插件的选项。同样，注意代码中的图片路径不要出错。
01 |
<script type="text/javascript"> |
02 |
$(document).ready(function(){ |
04 |
// Initialize Backgound Stretcher |
05 |
$('.demoo').bgStretcher({ |
06 |
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg', 'images/sample-5.jpg', 'images/sample-6.jpg'], |
11 |
transitionEffect: 'fade', |
12 |
sequenceMode: 'normal', |
该插件不只是用于整个网页背景哦，还可以用于某个网页元素，当然，起码这个元素能设置背景，比如DIV之类等等。选择网页元素是通过ID或者Class来的，应为BODY这个元素名是网页里唯一的元素名，也就是给整个网页设置背景。如果是给页面某一个DIV块设置背景，那你需要给这个DIV定义一个ID或者知道它的样式Class名也行，ID和Class名最好是唯一的，要不然效果很惊人。
插件选项：
| 配置选项 | 缺 省 值 | 选项说明 |
|---|
| imageContainer |
bgstretcher |
bgStretcher will automatically build structure for the images list in a DOM tree. This parameter is ID for the images holder. Try inspecting the tree with a FireBug to get an idea how it's constructed. |
| resizeProportionally |
true |
Indicates if background image(s) will be resized proportionally or not. |
| resizeAnimate |
false |
Indicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.) |
| images |
empty |
An array containing list of images to be displayed on page's background. |
| imageWidth |
1024 |
Original image's width. |
| imageHeight |
768 |
Original image's height. |
| maxWidth |
auto |
Maximum image's width. |
| maxHeight |
auto |
Maximum image's height. |
| nextSlideDelay |
3000 (3 seconds) |
Numeric value in milliseconds. The parameter sets delay until next slide should start. |
| slideShowSpeed |
normal |
Numeric value in milliseconds or jQuery string value ('fast', 'normal', 'slow'). The parameter sets the speed of transition between images. |
| slideShow |
true |
Allows or disallows slideshow functionality. |
| transitionEffect |
fade |
Transition effect (use also: none, simpleSlide, superSlide). |
| slideDirection |
N |
Slide Diraction: N – north, S – south, W – west, E – East (if transitionEffect = superSlide use also: NW, NE, SW, SE). |
| sequenceMode |
normal |
Sequence mode (use also: back, random) |
| buttonPrev |
empty |
Previous button CSS selector |
| buttonNext |
empty |
Next button CSS selector |
| pagination |
empty |
CSS selector for pagination |
| anchoring |
'left top' |
Anchoring bgStrtcher area regarding window |
| anchoringImg |
'left top' |
Anchoring images regarding window |
| preloadImg |
false |
For Preload images use true |
| stratElementIndex |
0 |
Start element index |
| callbackfunction |
null |
Name of callback function |
插件方法：
| 方法名称 | 方法说明 |
|---|
| $(objID).bgStretcher.play() |
Resume background slideshow |
| $(objID).bgStretcher.pause() |
Pause background slideshow |
| $(objID).bgStretcher.sliderDestroy() |
Destroy background slideshow |
浏览器兼容性：
MS Internet Explorer 6, 7, 8, 9
Mozilla Firefox 2, 3, 4
Opera 9+
Apple Safari