jQuery Cycle Plugin 網頁圖片輪播特效

想要讓網站有圖片輪播的特效很困難嗎?還要使用Flash才能做到嗎?現在不必了,只要利用JQuery並搭配幾張圖片,就可以達到我們所需的特效囉!在jQuery中,有個Plugin叫做「jQuery Cycle Plugin」,專們用來處理圖片輪播特效的外掛,使用方式非常的簡單,而且跑起來也蠻順暢的,也不必擔心使用者電腦如果沒有flash播放器,造成特效失敗的問題。

很多網站逐漸透過jQuery來取代Flash的一些特效,再加上現在HTML5是趨勢,很多東西都是透過JS並搭配HTML5來時做的,大家或許會擔心瀏覽器對Javascript處理的效能,別擔心,現在各家瀏覽器的開發重點大多著重在Javascript的處理效能上,所以在網站跑JS不會再跟以前一樣非常的吃電腦資源了,而且速度也快很多呢!



利用jQuery Cycle Plugin這個jQuery外掛可以做到什麼樣的特效呢?首先,jQuery是跨瀏覽器的,所以使用上不必擔心個瀏覽器的相容問題,至於特效,在外掛的官方,展示6種圖片輪播的特效,這些特效分別是:shuffle、zoom、fade、turnDown、curtainX、scrollRight (click),如果要把特效翻譯成中文,感覺怪怪的,還是讓大家直接看官方特效展示會比較快。

jQuery Cycle Plugin 網頁圖片輪播特效

官方特效

第1步  首先,網頁內要先引入jQuery和jQuery Cycle Plugin兩隻JS檔案,檔案的路徑請自行調整好。載入的順序盡量不要調動,否則很可能發生錯誤。語法請加入到「</head>」標籤之前。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.cycle.lite.js"></script>

第2步  接著在網頁的body內寫上以下語法,其中的「<div class=”show”></div>」是採用css背景圖片的方式呼叫出圖片,如果你習慣用img語法,那你也可以全部改成img語法輸出圖片,這樣可以簡化CSS的部分,但相對的html檔案就會比較多語法(在此只先使用4張圖片輪播)。

jQuery Cycle Plugin 網頁圖片輪播特效

第3步  接著請您準備四張圖片(在此圖片是使用600*450),再來我們要刻CSS了。接著請按照下圖key入第一部分「#sider」的CSS語法,對應到HTML的「<div id=”slider”>」語法中設定了區塊的高和寬;接著下方的「.show1」這邊對應的就是「<div class=”show1″>」,因為我們上面設定show1~show4,所以需要設定四個,在此只展示.show1和.show2。

jQuery Cycle Plugin 網頁圖片輪播特效

第4步 接著,我們需要設定圖片輪播的速度與特效,如果特效使用fade,那就在「</head>」標籤之前加上以下語法:

<script type="text/javascript">
 jQuery(document).ready(function($) {   
$('#slider').cycle({   
          fx:    'fade',  //特效           speed:  7500,
          timeout:  7200,
          random:  1
         });
 }); </script>

第5步  回到網頁,我們就會看到特效,以下是fade換場時的畫面,原本的會淡化,新的會逐漸顯示。

jQuery Cycle Plugin 網頁圖片輪播特效