全螢幕背景的幻燈片jQuery:Vegas2 (多效果)

全屏背景插件 Vegas

今天跟你分享一個網頁全屏背景jQuery插件Vegas2,它和其它背景插件不同之處就是帶有幻燈片功能。幻燈片的切換有多種風格,如旋轉、漸隱、左右等方式,切換的時候還有進度條顯示!!~~

 

使用方法 :

STEP 1: 嵌入CSS樣式表和JS

把VEGAS的CSS、JS以及jQuery插件嵌入到<head>內。

<link rel="stylesheet" href="http://jaysalvat.github.io/vegas/releases/latest/vegas.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://jaysalvat.github.io/vegas/releases/latest/vegas.js"></script>

STEP 2: JAVASCRIPT設置,添加背景圖片

<body>
...
 HTML内容
...
<script>
$('#example, body').vegas({
 slides: [
 { src: '/img/slide1.jpg' },
 { src: '/img/slide2.jpg' },
 { src: '/img/slide3.jpg' },
 { src: '/img/slide4.jpg' }
 ]
});
</script>
</body>

另外建議看SETTING頁面,查看更多插件的參數設置,如果在做全屏式的網頁,可以使用這個背景插件,或許能給網頁增加不少的氣氛哦!

plugIN : Vegas
下載 :http://vegas.jaysalvat.com/index.html

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s