啰嗦几句:学习的可以直接省略,一直本着写原生的插件想法,但是前天看了吕大豹的博客觉得自己都没有正经的写个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 源码解析(一)---使用的更多相关文章

  1. 轮播插件unsilder 源码解析(一)---源码解析

    jq扩展内容 $.fn.unslider = function(opts) { return this.each(function(index,elem) { var $this = $(elem); ...

  2. 轮播插件unsilder 源码解析(二)

    $.fn._active = function(className) { //当前的添加class,相邻元素去除class return this.addClass(className).siblin ...

  3. 3D轮播切换特效 源码

    这个3D轮播切换特效是我2017年2月份写的 当初我 刚接触HTML不久,现在把源码分享给大家 源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范 每个浏览器 ...

  4. Android 热修复Nuwa的原理及Gradle插件源码解析

    现在,热修复的具体实现方案开源的也有很多,原理也大同小异,本篇文章以Nuwa为例,深入剖析.  Nuwa的github地址 https://github.com/jasonross/Nuwa 以及用于 ...

  5. Ocelot简易教程(七)之配置文件数据库存储插件源码解析

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9852711.html 上篇文章给大家分享了如何集成我写的一个Ocelot扩展插件把Ocelot的配置存储 ...

  6. Android 全面插件化 RePlugin 流程与源码解析

    转自 Android 全面插件化 RePlugin 流程与源码解析 RePlugin,360开源的全面插件化框架,按照官网说的,其目的是“尽可能多的让模块变成插件”,并在很稳定的前提下,尽可能像开发普 ...

  7. Maven 依赖调解源码解析(二):如何调试 Maven 源码和插件源码

    本文是系列文章<Maven 源码解析:依赖调解是如何实现的?>第二篇,主要介绍如何调试 Maven 源码和插件源码.系列文章总目录参见:https://www.cnblogs.com/xi ...

  8. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  9. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

随机推荐

  1. 关于React的父子组件通信等等

    //==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...

  2. 记录一次Quartz2D学习(二)

    (一)内主要就是讲了线条的绘制以及绘制状态的保存与恢复 本次就讲一些图形的画法 2 图形的绘制 2.1  三角形的绘制 :(就是绘制三条线) - (void)drawRect:(CGRect)rect ...

  3. 利用DetachedCriteria构建HQL参数动态匹配

    此文章是基于 搭建SpringMVC+Spring+Hibernate平台 1. DetachedCriteria构建类:CriteriaBuilder.java package com.ims.pe ...

  4. shell编程常用的截取字符串操作

    1.          常用的字符串操作 1.1.           替换字符串:$ echo ${var/ /_}#支持正怎表达式 / /表示搜索到第一个替换,// /表示搜索到的结果全部替换. ...

  5. centos7的网络设置

    必备知识:linux下对文件的编辑操作 首先给出的是vi的基础  后面会有详细的远程连接Centos的方法 vi的基本概念 基本上vi可分为三种操作状态,分别是命令模式(Command mode).插 ...

  6. 微软本月将推Win10 望打破Win8所带来差评影响

    系统妈 据香港“文汇报”7月15日报道,美国电脑巨擘微软13日宣布,新视窗系统10(Windows 10)将于7月29日推出.微软高层迈赫迪在网志表示,届时全球将有13个城市举办特别活动,表扬参与Wi ...

  7. HDOJ 1326. Box of Bricks 纯水题

    Box of Bricks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  8. IO流中将字节流转成字符流的方法

    //字节流--->字符流 1. public class TestIO { public static void main(String[] args) throws IOException { ...

  9. 《----css样式---------浮动带来的影响与解决方法---------------》

    浮动就是让我们的元素脱离标准文档流,目的是为了布局好看! 浮动的现象: 脱离标准文档流被叫做脱流,同时会出现字围现象. 浮动的元素会相互贴靠,而且如果父容器空间足够大,则浮动的元素会正常紧靠也就是后一 ...

  10. 【WPF】GridLengthAnimation

    参考 : http://zhidao.baidu.com public class GridLengthAnimation : AnimationTimeline { public static re ...