偶爾發現了這么一個插件，很不錯的一個功能！
jQuery bgStretcher (Background Stretcher)，可以為你的網頁添加多張背景圖，且多個背景圖能夠自動切換，同時背景圖大小可以自適應瀏覽器窗口的大小。背景圖的切換效果有淡入淡出，滾動，幻燈，其中選用滾動和幻燈時，可以選擇方向，上下左右，或者左上右下，右上左下。圖片切換順序也可以設置正向，反向或者隨機。
插件特點：
腳本文件簡潔，設置簡單；
支持所有新版瀏覽器；
支持單張或者多張圖片。
插件使用：
首先你要把插件先下載再說，插件包里已經包含了所需要的JS文件。
然后，把下面的代碼插入到你網頁的<head>和</head>之間，這樣后面才能使用插件，注意代碼中的路徑，至於是相對路徑還是絕對路徑看你實際需要。
<script type="text/javascript" src="../jquery-1.5.2.min.js"></script> <script type="text/javascript" src="../bgstretcher.js"></script> <link rel="stylesheet" href="../bgstretcher.css" />
接着把下面的代碼，插入到上面代碼之后，來初始化 bgStretcher 插件，要告知插件在哪個元素上起作用，同時可以配置插件的選項。同樣，注意代碼中的圖片路徑不要出錯。
<script type="text/javascript"> $(document).ready(function(){ // Initialize Backgound Stretcher $('BODY').bgStretcher({ images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768 }); }); </script>
該插件不只是用於整個網頁背景，還可以用於某個網頁元素，當然，起碼這個元素能設置背景，比如DIV之類等等。選擇網頁元素是通過ID或者Class來的，應為BODY這個元素名是網頁里唯一的元素名，也就是給整個網頁設置背景。如果是給頁面某一個DIV塊設置背景，那你需要給這個DIV定義一個ID或者知道它的樣式Class名也行，ID和Class名最好是唯一的，要不然效果很驚人。
<script type="text/javascript"> $(document).ready(function(){ // Initialize Backgound Stretcher $('.classname-of-div').bgStretcher({ images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768 }); }); </script> <body> <div class="classname-of-div"> Your content goes here... </div> </body>
插件選項：
| 配置選項 | 缺 省 值 | 選項說明 |
|---|---|---|
| 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
Google Chrome
下載地址：http://www.ajaxblender.com/script-sources/bgstretcher-2/download/bgstretcher-2.zip
Demo：http://www.ajaxblender.com/script-sources/bgstretcher-2/demo/index.html
主頁：http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html