大概是四月初开始写的,中间停了有一个月吧。这是我在Github的第一个项目。项目地址:https://github.com/linzb93/jquery.slide.js

轮播应该是最好写的插件了,也是每个前端应该掌握的技术之一,但是后期功能的拓展,维护性什么的,就不是凭空想象可以解决的。

会去写这个插件,有两个考虑,一个是要提升自己的编码能力,现在工作中能用到的技术不过尔尔(例如面向对象什么的几乎用不上),最好能有一个Side Project 练练手;另一个是现在部门里常用的两个插件,swiper和superslide,都有不满意的地方。前者功能丰富,但多数功能用不上。而且会有莫名其妙的高度,代码量太大,很难找到根源;后者轻量得多,但最可恶的是多数样式是写死在插件里,调整的时候很费劲,不是在css里加上“! important”,就是在脚本里面覆盖它,可读性和维护性都很差。

所以,这个插件的目标是打造轻量的,样式可控性高的jQuery轮播插件。

现在已经发布2.0版。和1.x版不同,1版用的还是Javascript对象实例化的方法,和swiper传参的方式一样。2.0开始,用jQuery插件常用的调用方式。

我打算把这三个月的开发经验和感想和大家分享。包括插件的拓展,维护性,如何应对用户各种操作。争取今年能写完吧。

后续的计划,除了再添加些常用的功能以外,就是学习Javascript设计模式,以及阅读jQuery源码,提升插件的可维护性。

自己写的一个jQuery轮播插件的更多相关文章

  1. 12款 jquery轮播插件

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

  2. JQUERY 轮播插件

    闲来无事,写个轮播插件,项目中用到的时候就无需在写了,不然会累死宝宝的 废话少说 代码上 html部分 <div class="lunbo"> <ul> & ...

  3. jQuery轮播插件SuperSlide【2016-10-14】

    [一.页面实现轮播效果] (1)效果下图可以自动轮播 (2)代码  autoPlay控制是否轮播 //banner轮播 $(".banner").slide({mainCell:& ...

  4. 自己写的一个jQuery对联广告插件

    效果图: 文件的位置摆放: 插件的代码: ;(function($){ $.extend({ dLAdv:function(options){ var defaults={ leftType:0,// ...

  5. 基于 html5的 jquery 轮播插件 flickerplate

    https://github.com/chrishumboldt/Flickerplate 官网 <link href="${baseURL}/themes/default/css/f ...

  6. 结构-行为-样式-requireJs实现图片轮播插件

    最近工作需要,就自己写了一个图片轮播插件,不过想到要集成到框架中,于是又用RequireJs改了一遍. 主要文件: style.css jquery-1.11.1.min.js require.js ...

  7. H5滚动轮播插件

      概述 JRedu 随着前端技术的发展,越来越多的H5技术被应用到实际开发中,尤其是js插件更是无处不用,本章节我们主要分享下如何去自己封装一个滚动轮播插件. 1效果图如下: 2主要功能   支持超 ...

  8. jquery做一个小的轮播插件---有BUG,后续修改

    //首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...

  9. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

随机推荐

  1. jquery-validate的用法

    默认校验规则 (1)required:true               必输字段(2)remote:"check.php"          使用ajax方法调用check.p ...

  2. PHP中生成验证码

    //生成图片$im = imagecreatetruecolor(100,30);//生成颜色,当第一次调用生成颜色的方法,是生成背景颜色,默认是黑色//如果想自定义背景颜色,用到imagefill函 ...

  3. 使用ServletConfig获得web.xml资源中的参数

    适用:一些不需要再Servlet文件中初始化的可以使用,例如:数据库用户名和密码 //Servlet文件 //实例化ServletConfig对象  ServletConfig servletConf ...

  4. Javascript多线程引擎(一)

    Javascript多线程引擎(一) Javascript 天生是单线程的语言, 不支持synchronized等线程操作, 但是这便不妨碍Javascript作为web语言中最具有魅力语言之一. 虽 ...

  5. Git 和 Github的关系

    惭愧,这个问题到昨天才弄明白! Git 其实是一种版本控制的协议,和SVN/CVS类似,git协议定义了一个版本控制相关的各个操作,和SVN/CVS不同的是,git采用的是分布式的方法,并不需要服务器 ...

  6. 解决Github使用Fastly CDN而导致不能加载网页的方法

    Github现在基本属于“安全”网站,但 Github使用fastly.net的CDN服务后,其网站在国内经常不能正常加载网页.github.global.ssl.fastly.net的亚洲IP一般为 ...

  7. 轻量级IOC框架:Ninject

    Ninject 学习杂记 - liucy 时间2014-03-08 00:26:00 博客园-所有随笔区原文  http://www.cnblogs.com/liucy1898/p/3587455.h ...

  8. 利用XCode来进行IOS的程序开发

    利用XCode来进行IOS的程序开发 本随笔系列主要介绍从一个Windows平台从事C#开发到Mac平台苹果开发的一系列感想和体验历程,本系列文章是在起步阶段逐步积累的,希望带给大家更好,更真实的转换 ...

  9. Windows Store 应用

    使用 Project Siena 生成一个 Windows Store 应用   继 App Studio 之后微软又一力作 Project Siena [Win8 应用神器]给初学开发 或 对 Wi ...

  10. 移动web知识

    1.像素知识 px: css pixels,逻辑像素,浏览器使用的抽象单位 dp,pt:device independent pixels ,设备无关像素 dpr:devicePixelRatio 设 ...