文章專區

網頁設計相關文章

使用jQuery Cycle Plugin製作最簡單基本的輪播廣告

如果只是需要圖片自動輪播,不需要手動點圖的功能的話,可以試試以下方法,不用太多原始碼,輕鬆做出有淡入淡出效果的圖片輪播唷!

 

外掛套件:

官網:http://malsup.com/jquery/cycle/

網站上展示了六種特效的外掛,分別有:shuffle、zoom、fade、turnDown、curtainX、scrollRight (click),可以多嘗試不同特效。以下以「fade」淡入淡出之效果來示範,其餘效果只要將fade改為想要的特效名稱即可。

 

首先排列要輪播的圖片

HTML

長寬的設定可以依照圖片尺寸做調整

 

CSS

 

JS

需要三個JS檔,可以從官網下載。

 

範例:https://codepen.io/bok770/pen/VzvbbK

 

另外在http://malsup.com/jquery/cycle2/有更多進階的輪播效果可以選擇,皆有詳細的使用步驟,相當方便使用唷!