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