Unslider 是一款支援鍵盤操作 (可左右鍵切換) , 並且具備響應式設計 , 會隨著視窗大小自動調整slider圖片比例 , 最驚人的是它的js檔案只有小小的6KB (min版的只有3KB) , 是一款高度優化的JQUERY功能套件 , 非常推薦網站使用 !
DEMOUnslider 使用教學先在頂頭(head)引入JQ程式庫以及JS功能檔案, 檔案路徑請自行調整 , 以下範例是以根目錄為路徑:
- <script src="jquery.min.js"></script>
- <script src="unslider.js"></script>
- 或是
- <script src="unslider.min.js"></script>
複製代碼 HTML部分將Slider作用區域部分以class="banner"類別的div包覆住 , 裡面每個 li 代表一個Slider的切換 , 可以自由新增背景以及添加內容。- <div class="banner">
- <ul>
- <li>This is slider1.</li>
- <li>This is slider2.</li>
- <li>This is slider3.</li>
- </ul>
- </div>
複製代碼 CSS美化部分 , 若要使用全屏效果 , 需要將.banner的寬度設置為width: 100% 讓它延展全螢幕 , 其他美化部份可以參考下載範例中的css設定。
JS功能設定部分:- $('.banner').unslider({
- speed: 500, // 切換時的動畫速度
- delay: 3000, // 每個SLIDER的延遲時間
- complete: function() {}, // 可以針對每個SLIDER完成後寫入個別動作指令
- keys: true, // 是否開啟左右鍵鍵盤控制
- dots: true, // 是否顯示Slider導覽點
- fluid: false // 支援響應式網站設計 , 開啟後有可能會在非響應式網站中出現問題
- });
複製代碼 其他詳細的操作可參考官方網站:http://unslider.com/
jquery unlider範例.rar
(594.18 KB, 下載次數: 35)
|