jQuery plugin : bgStretcher 背景图片切换效果插件

转自：http://blog.dvxj.com/pandola/jQuery_bgStretcher.htmljavascript

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

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

插件使用：

　　首先，你固然要把插件先下载再说，插件包里已经包含了所须要的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(){ 
       
        03 
              
        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'], 
       
        07 
                    imageWidth: 800,  
       
        08 
                    imageHeight: 400,  
       
        09 
                    slideDirection: 'N', 
       
        10 
                    slideShowSpeed: 1000, 
       
        11 
                    transitionEffect: 'fade', 
       
        12 
                    sequenceMode: 'normal', 
       
        13 
                }); 
       
        14 
                  
        15 
            }); 
       
        16 
        </script>

　　该插件不仅是用于整个网页背景哦，还能够用于某个网页元素，固然，起码这个元素能设置背景，好比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

Google Chrome
原文在这里，俺稍微翻译了一下，演示效果俺本身调整了参数。 http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html