Unslider--入门篇

  背景:因工作需求,需要完成一个图片轮播效果,因博主不是专业的前端开发人员,so google之,经过挑选最终选择使用Unslider插件完成工作。

一、Unslider插件介绍

  unslider插件是一个超小的Jquery轮播(slider)插件,大小不到3k,源码托管在GitHub上,是一个开源项目。

1、跨浏览器

Unslider已经在所有最新的浏览器上测试过了,并能对那些老旧的浏览器也能做出很好的降级处理。(PS:博主亲测,在IE8上使用正常

2、支持键盘导航(没错,你没看错,就是键盘上的左右键,很炫,有木有!!)

3、自动调整高度

4、支持响应式布局(不懂的链接在此,自戳:响应式布局)

  

  说了这么多特色了,看一下效果眼见为实吧,链接:http://www.bootcss.com/p/unslider/

  看了效果,有没有感觉博主的好多文是copy来的,╮(╯▽╰)╭木办法,博主水平有限,只能边学边做笔记给大家分享了,多多包涵啦。( ̄︶ ̄)↗

二、如何使用Unslider

1、引入jQuery和Unslider

  使用Unslider,你需要在页面中引入Unslider和jQuery脚本,jQuery版本不限,建议在版本1.8+(博主亲测使用1.8版本的jQuery.js可正常使用Unslider脚本)。

  如何验证页面已引入jQuery脚本,按F12,在控制台中输入!!window.jQuery,若返回true,则说明页面中已引入jQuery脚本。

  引入jQuery、Unslider脚本,页面代码如下:

 <script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>

2、准备HTML代码

  div+ul li(无序列表),完美解决,无需额外的html标签!为了简洁我们的例子只写三个li,上代码!

 <div class="banner">
<ul>
<li style="width:100%;height:50px;background-color:red;">
<h1>This is a slide.</h1>
</li>
<li style="width:100%;height:50px;background-color:yellow;">
<h2>This is another slide.</h2>
</li>
<li style="width:100%;height:50px;background-color:blue;">
<h3>This is a final slide.</h3>
</li>
</ul>
</div>

  PS:css样式以及h1、h2、h3标签的使用,只是为了能更好的展现出页面切换的效果,不必深究。

3、增加Css样式,使页面效果更漂亮

  Unslider插件没有提供一个标准的CSS样式,你可以尽情操作每张幻灯片(每个li标签内存放一张幻灯片)的Css样式,自由度之大可以想象。

 .banner {
position: relative;
overflow: auto;
}
.banner li {
list-style: none;
}
.banner ul li {
float: left;
}

4、使用unslider插件

 $(function() {
var slidey = $('.banner').unslider({
speed: 500,
delay: 3000,
complete: function() {},
keys: true,
dots: true,
fluid: false
});
data = slidey.data('unslider');
data.move(2, function() {});
});

 相信到此时,你已经能够看到一个简易版的图片轮播效果已经做完了,不过,这只完成了自动播放效果。

Unslider--使用手册系列(一)的更多相关文章

  1. 阿里 Java 手册系列教程:为啥强制子类、父类变量名不同?

    摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! 目录 父子类变量名相同会咋样? 为啥强制子类.父类变量名不同? ...

  2. vertical-align_CSS参考手册_web前端开发参考手册系列

    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值.这会使元素降低而不是升高.在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式. <!DOCTYP ...

  3. 告诉你:DOS系统实例手册系列专辑连载中

    DOS系统实例手册系列专辑连载中 内容提要:

  4. cmake 手册系列

    http://www.cnblogs.com/coderfenghc/archive/2012/06/16/CMake_ch_01.html

  5. Ansible 小手册系列 十四(条件判断和循环)

    条件判断 When 语句 在when 后面使用Jinja2 表达式,结果为True则执行任务. tasks: - name: "shut down Debian flavored syste ...

  6. Ansible 小手册系列 二十(经常遇到的问题)

    (1). 怎么为任务设置环境变量? - name: set environment shell: echo $PATH $SOME >> /tmp/a.txt environment: P ...

  7. Ansible 小手册系列 十九(常见指令表)

    Play 指令 说明 accelerate 开启加速模式 accelerate_ipv6 是否开启ipv6 accelerate_port 加速模式的端口 always_run   any_error ...

  8. Ansible 小手册系列 十七(特性模块)

    异步操作和轮询 --- # Requires ansible 1.8+ - name: 'YUM - fire and forget task' yum: name=docker-io state=i ...

  9. Ansible 小手册系列 十八(Lookup 插件)

    file:获取文件内容 --- - hosts: all vars: contents: "{{ lookup('file', '/etc/foo.txt') }}" tasks: ...

随机推荐

  1. uestc oj 1217 The Battle of Chibi (dp + 离散化 + 树状数组)

    题目链接:http://acm.uestc.edu.cn/#/problem/show/1217 给你一个长为n的数组,问你有多少个长度严格为m的上升子序列. dp[i][j]表示以a[i]结尾长为j ...

  2. Spring JTA应用JOTM & Atomikos III Atomikos

    前面简单介绍了JOTM如何在Spring中配置,并如何使用它的JTA事务,本节将介绍Atomikos如何与Spring集成,并使用它的JTA事务. Atomikos,是一个基于Java的开源事务管理器 ...

  3. 十年MFC经历认识的Microsoft技术 [转]

    十年MFC经历认识的Microsoft技术[原创] 孙辉 自从2005年3月8日下午16时“十年MFC经历认识的Microsoft技术”以帖子的方式发表于CSDN论坛后,引起了许多网友得好评,使得笔者 ...

  4. php safe mode bypass all <转>

    PHP safe mode bypass from 4.x to 5.x all. Functions: * mb_send_mail* curl_init* imap_open* mail* ion ...

  5. Python-面向对象 (二 继承)

    一 继承   基类定义例如以下: class people:     #define attribute     name = ''     age  = 0     #define private ...

  6. ProbS CF matlab源代码(二分系统)(原创作品,转载注明出处,谢谢!)

    %ProbS clear all;%% 数据读入与预处理 data = load('E:\network_papers\u1.base');test = load('E:\network_papers ...

  7. IOS 7 Study - Displaying an Image on a Navigation Bar

    ProblemYou want to display an image instead of text as the title of the current view controlleron th ...

  8. Codeforces Round #290 (Div. 2) A. Fox And Snake 水题

    A. Fox And Snake 题目连接: http://codeforces.com/contest/510/problem/A Description Fox Ciel starts to le ...

  9. 有用好看的CSS+JS+table 导航

    预览效果图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dis ...

  10. Nginx_handler模块发开(hello模块结构解析)

    声明:请在文章页面明显位置给出原文连接 http://www.cnblogs.com/paulweihan/p/4654173.html,否则保留追究法律责任的权利. 近期查了非常多资料.入门的样例都 ...