写jquery插件【轮播图】历程

snowLu 发布于2019-08-01 16:07 / 1819人阅读

摘要：轮播图插件的任务已经接近尾声，在书写轮播图期间确实有一些小的感触的。

轮播图插件的任务已经接近尾声，在书写轮播图期间确实有一些小的感触的。感兴趣的可以访问我的轮播图的线上地址:轮播图

首先，轮播图插件其实并不是我第一次写，之前也写过，不过那时候是按照别人的思路写下来的，算起来大概有一年了，这次又一次开始轮播图是因为拜读了《单页面Web应用 JavaScript从前端到后端》的这本书的1-4章，我开始跃跃欲试的想把它用到自己的代码中，书本中前四章的思想是将js模块化，我就跟着作者的代码思路以及代码习惯先尝试着做了个轮播图，发现作者的模块化思想非常好，时间长了，养成这种思考问题的习惯会在工作中事半功倍。其实就像一个人的生活习惯，比较讲究的人会按照事物的属性给分门别类，并且将事物放在指定的位置，这样到时候找起来也会比较方便快捷，不仅是关系到找东西，如果是有相同属性的东西进来的时候，也就顺理成章的放到相同属性的那里去，这样管理起来也非常方便。

插件开始

刚开始的时候遇到了问题，作者是从单个页面直接入手的，我只想写个插件，那不能跟作者似的多带带放在一个页面中吧？？？

首先，我起一个跟功能相似的名字FocusMap，然后直接就将他作为相应的插件，不会再深入的加入详细的模块了，现在FocusMap就是轮播图插件；里边的变量、函数都是跟轮播图的功能相关联的。

其次，设计插件的思路:

轮播图根据用户设定的图片，在轮播的区域内显示相应的图片

轮播图有展示后一张的功能

轮播图有展示前一张的功能

轮播图有轮播的动画模式

点击页码可以直达想要的找的图片那里

恩，基本功能就这些，然后开始编写代码
附线框图一张：

编写代码中

代码编写中遇到问题是在正常不过的，恩，我的也出现了不少问题，首先实现的是自动轮播，好，自动轮播实现好了，接着实现点击上一张的功能吧，发现自动轮播好像哪里写的不对劲，哦my噶，检查检查，看哪里想的不对劲，看看能不能改，不能改重新来，恩，是能改的，好事，给老公一看，你这里好多重复的，好多dom改动，看看能不能整合到一起，代码看看能不能简化，大大的白眼，不过还是听从了建议，适当的整理了一遍，恩，比以前有些好看了。

尾声

东西快做完了，但是bug也随之而来，此时的我的在线作品还是有2个bug的，大写的鄙视，大家不要怪我喽，说是还没有完工么！！！不过会尽快做完，以一个好的姿态来面对大家，还有我！

2016.12.25更新

bug已经修改完毕，线上的效果是正确的，如果有人发现bug，请批评指正，多谢！！

2016.12.26更新

1、在原来的基础上改动，使其做为jquery的插件形式，调用形式：

$(".focusMap").FocusMap({
    imgArray : imgArray,     //页面中需要输入的图片信息
    animate_mode : animate_mode //定义页面中的滑动样式 slide滑动，fade渐隐渐现
 })

重新起一个新页面，算是2.0的版本吧，
有兴趣的同学可以戳这里：yangmengya的轮播图插件

2、优化代码，将重复的代码聚合到一起，减少代码重复

3、用户可以通过自定义来设置图片滑动的时间间隔，和渐隐渐现的时间间隔，例如：

  $(".focusMap").FocusMap({
          imgArray : [
            "image/slide_01.png",
            "image/slide_02.png",
            "image/slide_03.png"
          ],
          animate_mode : "slide",
          change_time : 3000, //图片变换的时间间隔
          slide_time : 500, //slide 动画时间间隔
          fadein_time : 800, //fade渐现的时间
          fadeout_time : 100, //fade渐隐的时间
        })

idc机房托管专线服务轮播图写轮播图将轮播图 php轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50308.html

写jquery插件【轮播图】历程

摘要：轮播图插件的任务已经接近尾声，在书写轮播图期间确实有一些小的感触的。轮播图插件的任务已经接近尾声，在书写轮播图期间确实有一些小的感触的。感兴趣的可以访问我的轮播图的线上地址:轮播图首先，轮播图插件其实并不是我第一次写，之前也写过，不过那时候是按照别人的思路写下来的，算起来大概有一年了，这次又一次开始轮播图是因为拜读了《单页面Web应用 JavaScript从前端到后端》的这本书的1...

khlbat 2019-08-21 11:21 评论0 收藏0
小白成长日记：一步一步写个轮播图插件

摘要：并不是所有人写的代码或者插件都适合小白使用，比如这是一个的滚动插件，大多数人使用了之后发现滚动不了，去作者提，其实是他们并不懂滚动的原理。最近在这里看了一篇关于面试的文章《回顾自己三次失败的面试经历》，作者三次倒在了轮播图上。囧，所以我也写个轮播图看看。这次是用jQuery写的，因为最近一直在研究jQuery插件的写法，所以用jQuery写的，而且我发现，我vue用太多，完全不熟悉d...

notebin 2019-08-22 11:15 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

DC_er 2019-08-21 17:42 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

Hwg 2019-08-05 12:25 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

spacewander 2019-08-29 13:50 评论0 收藏0