简单的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/ ，请勿用于任何商业用途