Unslider--使用手册系列(一)
2024-09-03 11:45:36
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() {});
});
相信到此时,你已经能够看到一个简易版的图片轮播效果已经做完了,不过,这只完成了自动播放效果。
最新文章
- php对应js math.random
- Wpf DatePicker 水印修改为中文
- JavaWeb chapter3 Servlet处理HTTP响应
- Java程序中调用Python脚本的方法
- Oracle RAC 常用维护工具和命令
- hug and Compression Resistance
- Mysql 5.6 新特性
- jquery ajax请求成功,数据返回成功,seccess不执行的问题
- 深入理解viewport(转)
- node 控制 树莓派做的天气闹钟
- 代码生成利器:IDEA 强大的 Live Templates(转)
- 关闭或启动linux防火墙后,docker启动容器报错
- python可视化库 Matplotlib 00 画制简单图像
- 破解第三课 关键跳和关键CALL
- java kafka单列模式生产者客户端
- 汇编语言计算Sin,Cos,Pow函数
- DATEDIFF 和 DATEADD
- 高效开发iOS -- 那些不为人知的KVC[转载]
- SystemLogParser ArcGIS Server运维工程师的好助手
- asp.net中的<;%%>;的使用
热门文章
- POJ1651Multiplication Puzzle(区间DP)
- eclipse查看 rt.jar 源码
- hdoj 5399 Tpp simple
- SQL Server sql 操作
- 错误";因为数据库正在使用,所以无法获得对数据库的独占访问权";的解决方案
- openNebula 模板实例化成虚拟机【参数名为VM_NAME】
- 网络虚拟化技术 TUN/TAP MACVLAN MACVTAP
- ISO 9141-2 and ISO 14230-2 INITIALIZATION and DATA TRANSFER
- VPW Communication Protocol
- Codeforces Gym 100531J Joy of Flight 变换坐标系