jquery全屏响应式幻灯片插件Unslider 不指定

jed , 2015-12-15 23:29 , 代码编程 , 评论(0) , 阅读(27323) , Via 本站原创 | |
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
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]