引入所需的js文件
<script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="//unslider.com/unslider.js"></script>
html結構
<
div
class="banner">
<
ul
>
<
li
>This is a slide.</
li
>
<
li
>This is another slide.</
li
>
<
li
>This is a final slide.</
li
>
</
ul
>
</
div
>
使用 CSS 美化外觀
.banner {
position
:
relative
;
overflow
:
auto
; }
.banner li {
list-style
:
none
; }
.banner ul li {
float
:
left
; }
最後就是調用插件
$(
'.banner'
).unslider({
speed: 500,
// 滾動速度
delay: 3000,
// 動畫延遲
complete:
function
() {},
// 動畫完成的回調函數
keys:
true
,
// 啓動鍵盤導航
dots:
true
,
// 顯示點導航
fluid:
false
// 支持響應式設計
});