Unslider是一个非常纯粹的jquery幻灯片插件,它没有多余的特效,用的只是非常简单也非常普通的滚动特效,但它的优点在于文件非常小,只有3K,CSS可以完全自定义,支持各现代浏览器,支持键盘操作。Unslider可以自动检测图片的高度,并自动平滑的调整图片的高度来适应幻灯片。
使用方法
引入jquery和unslider
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="unslider.min.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; }
写入JS初始化插件
$(function() {
$('.banner').unslider();
});
选项
虽然unslider是轻量级的,但也设置了一系列的选项来定制你的幻灯片(滑块)。以下是默认选项。您可以添加、删除或完全跳过这些选项,决定权在你手。
$('.banner').unslider({
speed: 500, // 动画的滚动速度
delay: 3000, // 每个滑块的停留时间
complete: function() {}, // 每个滑块动画完成时调用的方法
keys: true, // 是否支持键盘
dots: true, // 是否显示翻页圆点
fluid: false // 支持响应式设计(有可能会影响到响应式)
});
触屏支持
如果你想让Unslider支持moblie、触屏、swipe等任何支持,那你需要引入jQuery.event.swipe。
添加pre,next按钮
Unslider的默认功能,不包括上一页/下一页按钮。不过幸运的是,他们可使用Unslider的方法轻松的添加上。
<!-- The HTML -->
<a href="#" class="unslider-arrow prev">Previous slide</a>
<a href="#" class="unslider-arrow next">Next slide</a><!-- And the JavaScript --><script>
var unslider = $('.banner').unslider();
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
</script>
访问Unslider属性
使用jQuery的完美的数据方法,您可以访问和手动覆盖任何方法。以下列表是你可以操作的方法:
var slidey = $('.banner').unslider(),
data = slidey.data('unslider');
// 开始 Unslider
data.start();
// 暂停 Unslider
data.stop();
// 滑块跳转,还有一个可选的方法参数
data.move(2, function() {});
// data.move(0);
// 手动激活键盘功能
data.keys();
// 跳转到下一滑块,最后一个时不显示
data.next();
// 跳转到上一滑块,最前一个时不显示
data.prev();
// 添加圆点导航
data.dots();
参考链接:
http://www.jqcool.net/jquery-unslider.html
http://stephband.info/jquery.event.swipe/
http://www.bootcss.com/p/unslider/
http://unslider.com/
http://www.tuicool.com/articles/ZVn6bub
http://www.jq22.com/jquery-info1940
http://www.jq22.com/yanshi1940
使用方法
引入jquery和unslider
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="unslider.min.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; }
写入JS初始化插件
$(function() {
$('.banner').unslider();
});
选项
虽然unslider是轻量级的,但也设置了一系列的选项来定制你的幻灯片(滑块)。以下是默认选项。您可以添加、删除或完全跳过这些选项,决定权在你手。
$('.banner').unslider({
speed: 500, // 动画的滚动速度
delay: 3000, // 每个滑块的停留时间
complete: function() {}, // 每个滑块动画完成时调用的方法
keys: true, // 是否支持键盘
dots: true, // 是否显示翻页圆点
fluid: false // 支持响应式设计(有可能会影响到响应式)
});
触屏支持
如果你想让Unslider支持moblie、触屏、swipe等任何支持,那你需要引入jQuery.event.swipe。
添加pre,next按钮
Unslider的默认功能,不包括上一页/下一页按钮。不过幸运的是,他们可使用Unslider的方法轻松的添加上。
<!-- The HTML -->
<a href="#" class="unslider-arrow prev">Previous slide</a>
<a href="#" class="unslider-arrow next">Next slide</a><!-- And the JavaScript --><script>
var unslider = $('.banner').unslider();
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
</script>
访问Unslider属性
使用jQuery的完美的数据方法,您可以访问和手动覆盖任何方法。以下列表是你可以操作的方法:
var slidey = $('.banner').unslider(),
data = slidey.data('unslider');
// 开始 Unslider
data.start();
// 暂停 Unslider
data.stop();
// 滑块跳转,还有一个可选的方法参数
data.move(2, function() {});
// data.move(0);
// 手动激活键盘功能
data.keys();
// 跳转到下一滑块,最后一个时不显示
data.next();
// 跳转到上一滑块,最前一个时不显示
data.prev();
// 添加圆点导航
data.dots();
参考链接:
http://www.jqcool.net/jquery-unslider.html
http://stephband.info/jquery.event.swipe/
http://www.bootcss.com/p/unslider/
http://unslider.com/
http://www.tuicool.com/articles/ZVn6bub
http://www.jq22.com/jquery-info1940
http://www.jq22.com/yanshi1940