原创文学网(htwxw.com)
当前位置: 首页 > 珠宝 > 内容详情

一步一步教你写淡入淡出带注释的图片轮播插件 - 电脑教程 - 电脑技术网|

时间:2019-11-08来源:德州新闻网 -[收藏本文]

  好了,Let's go!开始我们的第一部分吧!

第一部分我们要达到的目标有:

1.建立一个大的框架,实现变换的逻辑,同时建立良好的代码结构,为以后的功能扩展打好基础。(好的开始是成功的一半!)

2.第一部分要实现的效果为图片自动切换(仅仅是这一个功能)。

  首先要有清晰地思路,要实现这一个效果,我们一定是调用一个初始化函数init()-->init()中开始变换第一张图片到下一张,不妨暂定这个功能函数为pos()-->要实现自动交替变换,那么肯定需要一个自动变换的功能函数auto()-->auto()中自动变换应该有两个方向,向前和向后,那么这个功能我们也可以通过一个函数来实现,暂定move()-->move()中是指定向上或向下一张变换,那么就可以回归到我们的变换函数pos()中!

  那么,我们就建立了一套完整可行的逻辑体系。根据以上逻辑,我们用代码结构来表示如下:

 

以上只是我个人的编码习惯:把功能块都写在一个闭包里,减少命名冲突,避免全局变量污染。(但是这样会有个问题,所有函数都在闭包里,很可能会导致ie内存泄露,所以还有另外种更好的方式:只把初始化函数写入闭包,其他功能通过原型内建。这样同样可以避免命名冲突和全局变量污染,又同时减轻了内存压力。这个优化方案将在下一部分一起说明)

 

好了,大的框架出来了,我们其实就成功了一半了,以下再根据每个模块具体的功能充实函数。由于dom选择器使我们最常使用的功能,所以这里预先定义了两个全局函数

 

相信大家都懂。

湖北手术治疗癫痫病医院

 

下面是每个模块函数的拆解:

init模块:

 

auto:

move:

pos:

好了,总的源码是这样的:

 

恩,这一部分到此结束吧,下一部分将增加淡入淡出效果和刚才提到了尽量规避闭包引起的内存泄露的优化方案!