搜索
SR數位設計 ECSHOP RWD響應式技術開發 JS程式語法 unslider 支援鍵盤操作以及響應式設計的全屏式Slider ...
byadmin 發表於 2013-6-4 21:12:54 , 2663人已閱讀 , 0人回應
Unslider 是一款支援鍵盤操作 (可左右鍵切換) , 並且具備響應式設計 , 會隨著視窗大小自動調整slider圖片比例 , 最驚人的是它的js檔案只有小小的6KB (min版的只有3KB) , 是一款高度優化的JQUERY功能套件 , 非常推薦網站使用 !

unslider.jpg

          DEMO

Unslider 使用教學

先在頂頭(head)引入JQ程式庫以及JS功能檔案, 檔案路徑請自行調整 , 以下範例是以根目錄為路徑:

  1. <script src="jquery.min.js"></script>
  2. <script src="unslider.js"></script>  
  3. 或是
  4. <script src="unslider.min.js"></script>  

複製代碼
HTML部分將Slider作用區域部分以class="banner"類別的div包覆住 , 裡面每個 li 代表一個Slider的切換 , 可以自由新增背景以及添加內容。
  1. <div class="banner">
  2.     <ul>
  3.         <li>This is slider1.</li>
  4.         <li>This is slider2.</li>
  5.         <li>This is slider3.</li>
  6.     </ul>
  7. </div>
複製代碼
CSS美化部分 , 若要使用全屏效果 , 需要將.banner的寬度設置為width: 100% 讓它延展全螢幕 , 其他美化部份可以參考下載範例中的css設定。

JS功能設定部分:
  1. $('.banner').unslider({
  2.         speed: 500,               //  切換時的動畫速度
  3.         delay: 3000,              //  每個SLIDER的延遲時間
  4.         complete: function() {},  //  可以針對每個SLIDER完成後寫入個別動作指令
  5.         keys: true,               //  是否開啟左右鍵鍵盤控制
  6.         dots: true,               //  是否顯示Slider導覽點
  7.         fluid: false              //  支援響應式網站設計 , 開啟後有可能會在非響應式網站中出現問題
  8. });
複製代碼
其他詳細的操作可參考官方網站:http://unslider.com/

jquery unlider範例.rar (594.18 KB, 下載次數: 33)
Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP響應式技術開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:service@uniflow.com.tw 連絡電話03-3555-069 (時間AM10:00~PM7:30)

, Processed in 0.184008 second(s), 53 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2017-6-28 21:57

回頂部