bgStretcher 2011 (Background Stretcher)是一个jQuery的插件，可以为你的网页添加多张背景图，且多个背景图能够自动切换，同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡出，滚动，幻灯，其中选用滚动和幻灯时，可以选择方向，上下左右，或者左上右下，右上左下。图片切换顺序也可以设置正向，反向或者随机。更多选项就看你自己慢慢研究了。@H_404_1@

bgStretcher是一个jQuery插件，它允许你添加一个大图像（或一组图像）到您的网页的背景，并会按比例调整图像大小，以填满整个窗口区域。如果使用多个图像模式（幻灯片的速度和持续时间可配置），该插件将作为幻灯片。@H_404_1@

插件特点：

@H_404_1@

脚本文件简洁，设置简单；支持所有新版浏览器；支持单张或者多张图片。@H_404_1@

插件使用：

@H_404_1@

首先，你当然要把插件先下载再说，插件包里已经包含了所需要的JS文件。 @H_404_1@

然后，把下面的代码插入到你网页的和之间，这样后面才能使用插件，注意代码中的路径，至于是相对路径还是绝对路径看你实际需要。@H_404_1@

接着把下面的代码，插入到上面代码之后，来初始化 bgStretcher 插件，要告知插件在哪个元素上起作用，同时可以配置插件的选项。同样，注意代码中的图片路径不要出错。@H_404_1@

// Initialize Backgound Stretcher
$('.demoo').bgStretcher({
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'],imageWidth: 800,imageHeight: 400,slideDirection: 'N',slideShowSpeed: 1000,transitionEffect: 'fade',sequenceMode: 'normal',});

});

该插件不只是用于整个网页背景哦，还可以用于某个网页元素，当然，起码这个元素能设置背景，比如DIV之类等等。选择网页元素是通过ID或者Class来的，应为BODY这个元素名是网页里唯一的元素名，也就是给整个网页设置背景。如果是给页面某一个DIV块设置背景，那你需要给这个DIV定义一个ID或者知道它的样式Class名也行，ID和Class名最好是唯一的，要不然效果很惊人。@H_404_1@

插件选项：

@H_404_1@

IoUs button CSS selector 404_1@

插件 方法：

@H_404_1@

方法名称方法说明 $(objID).bgStretcher.play() Resume background slideshow $(objID).bgStretcher.pause() Pause background slideshow $(objID).bgStretcher.sliderDestroy() Destroy background slideshow@H_404_1@