jQuery Cycle Plugin 網頁圖片輪播特效

發表時間： 2011-12-25

想要讓網站有圖片輪播的特效很困難嗎？還要使用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 網頁圖片輪播特效

〈官方特效〉

外掛名稱：jQuery Cycle Plugin

官方網站：http://jquery.malsup.com/cycle/

外掛下載：按這裡 (記得先服用jQuery)

第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張圖片輪播)。

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

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

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

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