<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>unslider演示</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="unslider.min.js"></script>
<style>
ul, ol { padding: 0;}
.banner { position: relative; overflow: auto; text-align: center;}
.banner li { list-style: none; }
.banner ul li { float: left; }
#carousel { width: 640px;}
#carousel .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
#carousel .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;
}
#carousel .dots li.active
{
background: #fff;
opacity: 1;
}
#carousel .arrow { position: absolute; top: 200px;}
#carousel #al { left: 15px;}
#carousel #ar { right: 15px;}
</style>
</head>
<body>
<div class="banner" id="carousel">
<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>
</div>
<script>
$(document).ready(function(e) {
$('#carousel').unslider({
speed: false,
delay: 3000,
complete: function() {},
keys: false,
dots: true,
fluid: true
});
});
</script>
</body>
</html>
unslider配置参数
speed: 500, // 动画过渡的速度(毫秒),如果不需要过渡效果就设置为false
delay: 3000, // 每张幻灯片的间隔时间(毫秒), 如果不是自动播放就设置为false
init: 0, // 初始化延迟时间(毫秒),如果不需要延迟就设置为false
pause: !f, // 当鼠标指针浮动在当前区域内时是否暂停自动播放
loop: !f, // 是否无尽循环播放
keys: f, // 是否开启键盘导航
dots: f, // 是否显示导航点
arrows: f, // 是否显示向前和向后的箭头
prev: '←', // 向前按钮中的显示文字(或html片段)
next: '→', // 向后......
fluid: f, // 是否宽度自适应
starting: f, // 在每个动画前调用的函数
complete: f, // 在每个动画之后调用的函数
items: '>ul', // 幻灯片的容器选择器
item: '>li', // 需要滚动的选择器
easing: 'swing',// 动画的缓动函数(easing function)
autoplay: true // 是否允许自动播放