文章專區
網頁設計相關文章
使用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/有更多進階的輪播效果可以選擇,皆有詳細的使用步驟,相當方便使用唷!