unslider 使用演示

本插件可配合jquery.event.swipe.js來實現觸摸響應，具體請參見jquery.event.swipe.js的使用說明。

1-首先我們定義一個固定的大小的DIV（id=”b04”），使用固定大小的圖片（width=”640” height=”480”），并限制容器大小（#b04 { width: 640px;}）

---

2-添加左右箭頭指示，單擊時候不讓他跳轉（href=”javascript:void(0)），并設置一個類（class=”unslider-arrow04 next”）讓他滑動到下一個圖片。

---

3-在整個文檔加載完成時執行一個回調函數（$(document).ready（function（）{ }））在這個函數中使用unslider 插件即可。

---

HTML

<div class="banner" id="b04"><ul><li><img src="01.jpg" alt="" width="640" height="480" ></li><li><img src="02.jpg" alt="" width="640" height="480" ></li><li><img src="03.jpg" alt="" width="640" height="480" ></li><li><img src="04.jpg" alt="" width="640" height="480" ></li><li><img src="05.jpg" alt="" width="640" height="480" ></li></ul><a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="arrowl.png" alt="prev" width="20" height="35"></a><a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="arrowr.png" alt="next" width="20" height="37"></a></div>

CSS

#b04 { width: 640px;}#b04 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}#b04 .dots li { display: inline-block; width: 10px; height: 10px; margin: 0 4px; text-indent: -999em; border: 2px solid #fff; border-radius: 6px; cursor: pointer; opacity: .4; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s;}#b04 .dots li.active {background: #fff;opacity: 1;}#b04 .arrow { position: absolute; top: 200px;}#b04 #al { left: 15px;}#b04 #ar { right: 15px;}

JS

$(document).ready(function(e) {var unslider04 = $('#b04').unslider({dots: true}),data04 = unslider04.data('unslider');$('.unslider-arrow04').click(function() {var fn = this.className.split(' ')[1];data04[fn]();});});

總結

以上是生活随笔為你收集整理的unslider制作轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。