简单的jQuery幻灯片实现

一、一些抱怨

自从国庆放假上班以来,又是忙碌的工作直到现在,但是说忙好像也没有加几天班,只是上班的时候工作排的挺满。但是别人貌似一直都不太忙(也是我自己觉得),感觉就很不爽。

我喜欢快速做完一件事,然后剩下的时间可以很充裕,一边学习一边去改进之前的东西。却总发现如果你做的越快,下一件事就来的越快。总会思考,是应该很努力的去工作,还是装作很努力的去工作。

我发现,对于在小城市工作的程序员来说,在小公司里面,而且是做前端这种无足轻重的工作,常常会有看不到一点未来的感觉。总会羡慕那些在北上广的同学,但一方面又想呆在家里。

而且有很多想法,但是行动力又严重不足。就好比写博客。为什么会写博客,一方面是想,如果哪天不做IT了,总要有点东西用来证明自己做过IT吧(或者说以后可以翻出来看看回忆一下)。另一方面觉得如果连写个博客都坚持不了,那也没有毅力去完成自己想干的事了。

记得当时想每个礼拜写一篇,无论如何都要写一篇。现在看来,差点就完全失败了。所以趁着还有一点激情,就写了这篇。本来不想写的,心想这个有什么好写的。但是呢,貌似很多事我都是有这种想法导致最后就越来越没有去坚持了。如果现在不写,估计就没有以后了吧。

二、正文

这篇文章就是说说自己写的一个jQuery幻灯的插件

先看看效果

源码地址在Github上,大家可以下载一下,点这里下载 。 进去后你可以发现在右边侧边栏下方有一个Download ZIP按钮,点击这个就可以下载了。

三、实现过程

首先,这个效果是一个淡入淡出的切换。

大体上实现思路就是,先写好html结构,其中只需要主体图片部分。像底部控制按钮和两侧控制按钮通过js来添加,这样也就方便实现通过参数决定是否需要这两个功能。

css部分实现思路是通过绝对定位把他们叠加到一起。通过控制透明度来实现淡入。

js部分,核心就是一个show(index)方法,其中index就是需要显示的图片序号。例如当鼠标移动到第一个点,这时。我就将第一个点的图片的zindex值提到最高,但是让它的opacity等于0,也就是完全透明,然后在使用animate方法让它的zindex为1.这样就可以了。当然,你还需要一个变量记录下你当前显示的图片的序号,因为每点击一次,需要复位一下,这时你可以把你当前的zindex设置为1,而你现在选择的设置为2,最后你需要现在选择的序号赋值给当前的。(这句话好绕,还是直接看源码比较简单,其中index是你即将选择的图的序号,preIndex目前最上面的那张图序号

本来想贴源码,不过感觉在博客园看源码还没有Github看舒服,而且Github上我还写了调用方法,参数等一些信息。源码还是去这里看把。都在src文件夹里面。

转载本站文章请注明作者和出处 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ,请勿用于任何商业用途

原文地址:https://www.cnblogs.com/season-huang/p/3392589.html