轮播插件unsilder 源码解析(一)---使用
啰嗦几句:学习的可以直接省略,一直本着写原生的插件想法,但是前天看了吕大豹的博客觉得自己都没有正经的写个jquery插件;所以在开始写之前我会先对几个比较热门的jquery的插件进行源码分析;至于为什么第一遍就选了unslider的原因主要的是今年二月份的时候我在找工作的时候我在自己写各种雷同的html,网站复制,当时就选了我们大杭电的官网的轮播,其插件用的就是unsilder,所以今天在想要以什么插件开头,当然就以unslider开始;
好了开始了
首先怎么使用它
Document
.unslider {
overflow: auto;
margin: 0;
padding: 0
}
.unslider-wrap {
position: relative
}
.unslider-wrap.unslider-carousel li {
float: left
}
.unslider-vertical > ul {
height: 100%
}
.unslider-vertical li {
float: none;
width: 100%
}
.unslider-fade {
position: relative
}
.unslider-fade .unslider-wrap li {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 8
}
.unslider-fade .unslider-wrap li.unslider-active {
z-index: 10
}
.unslider li, .unslider ol, .unslider ul {
list-style: none;
margin: 0;
padding: 0;
border: none
}
.unslider-arrow {
position: absolute;
left: 20px;
z-index: 2;
cursor: pointer
}
.unslider-arrow.next {
left: auto;
right: 20px
}
- Slide 1
- Slide 2
- Slide 3
- Slide 4
//
轮播插件unsilder 源码解析(一)---使用的更多相关文章
- 轮播插件unsilder 源码解析(一)---源码解析
jq扩展内容 $.fn.unslider = function(opts) { return this.each(function(index,elem) { var $this = $(elem); ...
- 轮播插件unsilder 源码解析(二)
$.fn._active = function(className) { //当前的添加class,相邻元素去除class return this.addClass(className).siblin ...
- 3D轮播切换特效 源码
这个3D轮播切换特效是我2017年2月份写的 当初我 刚接触HTML不久,现在把源码分享给大家 源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范 每个浏览器 ...
- Android 热修复Nuwa的原理及Gradle插件源码解析
现在,热修复的具体实现方案开源的也有很多,原理也大同小异,本篇文章以Nuwa为例,深入剖析. Nuwa的github地址 https://github.com/jasonross/Nuwa 以及用于 ...
- Ocelot简易教程(七)之配置文件数据库存储插件源码解析
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9852711.html 上篇文章给大家分享了如何集成我写的一个Ocelot扩展插件把Ocelot的配置存储 ...
- Android 全面插件化 RePlugin 流程与源码解析
转自 Android 全面插件化 RePlugin 流程与源码解析 RePlugin,360开源的全面插件化框架,按照官网说的,其目的是“尽可能多的让模块变成插件”,并在很稳定的前提下,尽可能像开发普 ...
- Maven 依赖调解源码解析(二):如何调试 Maven 源码和插件源码
本文是系列文章<Maven 源码解析:依赖调解是如何实现的?>第二篇,主要介绍如何调试 Maven 源码和插件源码.系列文章总目录参见:https://www.cnblogs.com/xi ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
随机推荐
- html img图片等比例缩放
在img标签里面只设置宽,不设置高,图片就会等比例缩放.
- 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)
今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...
- 机器学习实战笔记(Python实现)-03-朴素贝叶斯
--------------------------------------------------------------------------------------- 本系列文章为<机器 ...
- android 利用Handler触发另一个activity方法
如activityA代码: activityB = new ActivtyB(mHandler,CLOSE_SEARCH_MSG);//新建对像B传递,一个handler和Message,然后在act ...
- python学习7
1.函数作为返回值 eg: 调用执行结果如下: 在函数lazy_sum中又定义了函数sum,并且,内部函数sum可以引用外部函数lazy_sum的参数和局部变量(eg:args),当lazy_sum返 ...
- [bzoj3207][花神的嘲讽计划Ⅰ] (字符串哈希+主席树)
Description 背景 花神是神,一大癖好就是嘲讽大J,举例如下: “哎你傻不傻的![hqz:大笨J]” “这道题又被J屎过了!!” “J这程序怎么跑这么快!J要逆袭了!” …… 描述 这一天D ...
- SQL函数汇总【精选篇】
1.绝对值 SQL:select abs(-1) value O:select abs(-1) value from dual 2.取整(大) S:select ceiling(-1.00 ...
- MySQL字符串函数substring:字符串截取
MySQL 字符串截取函数:left(), right(), substring(), substring_index().还有 mid(), substr().其中,mid(), substr() ...
- jQuery--.wrap()方法
1. .wrap()方法:在每个匹配的元素外层包上一个html元素. 2. 有两种使用方法: .wrap(wrappingElement):其中wrappingElement可以是一个HTML片段,选 ...
- Python中用format函数格式化字符串
Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存. 1.百分号方式 语法:%[( ...