轮播插件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 独立版本的插件主要有如 ...
随机推荐
- 01背包问题python 2.7实现
版权声明:本文为博主原创文章,转载请注明转自 http://www.cnblogs.com/kdxb/p/6140625.html #!/usr/bin/env python # -*- coding ...
- 浅谈Java的匿名类
在实际的项目中看到一个很奇怪的现象,Java可以直接new一个接口,然后在new里面粗暴的加入实现代码.就像下面这样.那么问题来了,new出来的对象没有实际的类作为载体,这不是很奇怪吗? 思考以下代码 ...
- 4、项目的培训 - PMO项目管理办公室
培训是一个重要的内容,在公司内部就有相关的培训.对于PMO项目管理办公室来说,就是相关的项目的技术和业务的培训,以期让项目组人员能够快速的学习好项目业务内容和所需要使用到的技术内容,然后尽快的进入项目 ...
- html 概念
HTML 超文本标记语言,标准通用标记语言下的一个应用.http://baike.baidu.com/link?url=RYF4Pj7VUPifcXatU7OJLGRljIgkp4MjzkspARor ...
- Apache的详细安装教程和遇到的问题解决方案
Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一 (一)Apache安装软件下载 1.访问 ...
- log4j:ERROR Failed to rename [/log/xxx.log] to [/log/xxx.log.2016-11-23.log]
Log4j报错: log4j:ERROR Failed to rename [/log/xxx.log] to [/log/xxx.log.2016-11-23.log] google了一下发现是个b ...
- Merge 的小技巧
今天跟大家分享一下搬动数据使用Merge的方法. 有些时候,当我们做数据搬动的时候,有时候做测试啊,换对象啊,就会存在有时候外键存在,不知道怎么对应的关系.比如我现在有架构相同的两组table , A ...
- 理解Java对象序列化
http://www.blogjava.net/jiangshachina/archive/2012/02/13/369898.html 1. 什么是Java对象序列化 Java平台允许我们在内存中创 ...
- Weekly Traning Farm 16
先安利一下这套比赛,大概是doreamon搞的,每周五晚上有一场,虽然没人做题目质量挺高的 http://codeforces.com/group/gRkn7bDfsN/contests(报名前要先报 ...
- [LeetCode] Count Numbers with Unique Digits 计算各位不相同的数字个数
Given a non-negative integer n, count all numbers with unique digits, x, where 0 ≤ x < 10n. Examp ...