unslider 支援鍵盤操作以及響應式設計的全屏式Slider

Unslider 是一款支援鍵盤操作 (可左右鍵切換) , 並且具備響應式設計 , 會隨著視窗大小自動調整slider圖片比例 , 最驚人的是它的js檔案只有小小的6KB (min版的只有3KB) , 是一款高度優化的JQUERY功能套件 , 非常推薦網站使用 !

          DEMO

Unslider 使用教學

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

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

複製代碼

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, 下載次數: 35)

2013-6-4 21:12 上傳

點擊文件名下載附件
閱讀權限: 10