jQuery全頁式背景幻燈片 Slider 效果 (時尚效果推薦)

byadmin 發表於 2013-7-8 20:59:55 , 17683人已閱讀 , 0人回應

以往看到全屏(螢幕)式的背景幻燈片效果 , 都是在全flash網站上才會看到的 , 這種效果若是拿來呈現高質感的圖片 , 通常能夠帶來非常驚人的視覺效果 , 網站時尚指數絕對爆表 ! 好了廢話這麼多 , 今天要跟大家介紹能夠實現全頁式背景幻燈片效果的一款jQuery功能套件「bgStretcher」! Stretcher 具有有以下幾項特點：
1、簡單的腳本，簡單的部署
2、能夠在所有當代瀏覽器下工作
3、支持一張和多張圖片
4、會自動讓圖片適應整個網頁

Shawn強力推薦給大家 :)

簡易教學

網站使用起來非常簡單 , 除了引入相關的css以及js檔案 , 只需要帶入以下程式碼即可完成：

<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', 'images/sample-5.jpg', 'images/sample-6.jpg'],
imageWidth: 1024,
imageHeight: 768,
slideDirection: 'N',
slideShowSpeed: 1000,
transitionEffect: 'fade',
sequenceMode: 'normal',
buttonPrev: '#prev',
buttonNext: '#next',
pagination: '#nav',
anchoring: 'left center',
anchoringImg: 'left center'
});
});
</script>

複製代碼

其實這個時候聰明的你一定發現了 , 它是將圖片投影效果指定在body 標籤當中 , 因此若是要將它拿來作為一般的投影片非背景式 , 只需要將body改成指定的div id或是class就可以囉 :)

下方為本套件一些使用的參數與說明 , 可以搭配自由運用與調配 ~

參數名	默認值	描述
imageContainer	bgstretcher	bgStretcher 會自動給圖片在DOM樹中創建一個容器，那麼這個參數值就表示容器的ID
resizeProportionally	true	背景圖片是否會成比例縮放
resizeAnimate	false	背景圖片是否會以動畫形式縮放（注意，如果你的圖片過大，則會降低電腦速度）
images	empty	要循環展示的背景圖片數組
imageWidth	1024	原始圖片寬度
imageHeight	768	原始圖片高度
maxWidth	auto	圖片最大寬度
maxHeight	auto	圖片最大高度
nextSlideDelay	3000 (3 seconds)	Numeric value in milliseconds. The parameter sets delay until next slide should start.
slideShowSpeed	normal	圖片切換速度，可設置成一個整數毫秒數，或設置成 (』fast', 『normal', 』slow')
slideShow	true	允許或禁止幻燈片的功能
transitionEffect	fade	過渡效果(none, simpleSlide, superSlide).
slideDirection	N	滑動方向: N – north, S – south, W – west, E – East (如果 transitionEffect = superSlide 也可以用: NW, NE, SW, SE).
sequenceMode	normal	連續模式(back, random)
buttonPrev	empty	「Previous」按鈕的css選擇器
buttonNext	empty	「Next」按鈕的css選擇器
pagination	empty	分頁按鈕的css選擇器
anchoring	left top	bgStrtcher 相對於窗口的對齊方式
anchoringImg	left top	圖片相對於窗口的對齊
preloadImg	false	是否預加圖片
stratElementIndex	0	元素的起始索引
callbackfunction	null	回調函數名