Unslider--使用手册系列(一)
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--使用手册系列(一)的更多相关文章
- 阿里 Java 手册系列教程:为啥强制子类、父类变量名不同?
摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! 目录 父子类变量名相同会咋样? 为啥强制子类.父类变量名不同? ...
- vertical-align_CSS参考手册_web前端开发参考手册系列
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值.这会使元素降低而不是升高.在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式. <!DOCTYP ...
- 告诉你:DOS系统实例手册系列专辑连载中
DOS系统实例手册系列专辑连载中 内容提要:
- cmake 手册系列
http://www.cnblogs.com/coderfenghc/archive/2012/06/16/CMake_ch_01.html
- Ansible 小手册系列 十四(条件判断和循环)
条件判断 When 语句 在when 后面使用Jinja2 表达式,结果为True则执行任务. tasks: - name: "shut down Debian flavored syste ...
- Ansible 小手册系列 二十(经常遇到的问题)
(1). 怎么为任务设置环境变量? - name: set environment shell: echo $PATH $SOME >> /tmp/a.txt environment: P ...
- Ansible 小手册系列 十九(常见指令表)
Play 指令 说明 accelerate 开启加速模式 accelerate_ipv6 是否开启ipv6 accelerate_port 加速模式的端口 always_run any_error ...
- Ansible 小手册系列 十七(特性模块)
异步操作和轮询 --- # Requires ansible 1.8+ - name: 'YUM - fire and forget task' yum: name=docker-io state=i ...
- Ansible 小手册系列 十八(Lookup 插件)
file:获取文件内容 --- - hosts: all vars: contents: "{{ lookup('file', '/etc/foo.txt') }}" tasks: ...
随机推荐
- M站 confirm 插件
/*弹出提示*/.pop-error{position:absolute; left:25%; top:50%; width:200px; FILTER: progid:DXImageTransfor ...
- openmp 并行求完数
// GetWanShu.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include "omp.h" #inclu ...
- Jquery 操作 radio选中值
1.获取radio选中值 1.1 $('input:radio:checked').val(); 1.2 $("input[type='radio']:checked").va ...
- phantomjs
PhantomJS是以WebKit为核心并提供JavaScript编程接口(API)的无界面浏览器. 它提供对web标准的 快速 并且 原生 的支持: DOM操作.CSS选择符.JSON.Canvas ...
- WinSock异步IO模型之Select
如果你想在Windows平台上构建服务器应用,那么I/O模型是你必须考虑的. Windows操作系统提供了五种I/O模型,分别是: ■ 选择(select): ■ 异步选择(WSAAsyncSelec ...
- UIImage imageNamed 与 imageWithContentsOfFile的差别
[UIImage imageNamed:]仅仅适合与UI界面中的贴图的读取,较大的资源文件应该尽量避免使用 用UIImage载入本地图像最经常使用的是以下三种: 1.用imageNamed方法 [UI ...
- Swift学习笔记九
闭包 闭包是指能够在代码中使用和传递的自包含(self-contained)的块. Swift中的闭包和C以及OC中的块很相似.它们可以捕获并且存储定义它们的上下文中的任何常量和变量的引用.Swift ...
- 对.NET中Hashtable和ArryList的理解
1.HashTabel 在.NET Framework中,Hashtable是System.Collections命名空间提供的集合对象,同时它也是一个可变长的数组,用于处理和表现类似key/valu ...
- 五 Django 1.5.4 User Authentication 用户认证
一.创建drinker app ./manage.py startapp drinker 在INSTALL_APPS添加drinker 用户的Profile模型,django里面是可以自定义的. 通过 ...
- iOS 原生地图(MapKit、MKMapView)轨迹渐变
WechatIMG2.png 项目已接入高德地图,并且大部分功能已经实现好,但BOSS觉得iOS自带的地图效果更好...本着面向老板编程的思想,换之.还好,高德地图是在MapKit上封装的,大部分ap ...