前几天在blueIdea上看到一个淡入淡出的带注释的图片轮播效果http://bbs.blueidea.com/thread-2911266-1-1.html看了帖子作者的代码，虽然效果达到了，但是有几个地方本人有不同的看法： 1.那位作者的思路是隐藏掉真正的图片列表，而新建一个div，通过不断push当前图片到那个div的innerHTML里的方式来做一个一个交替变化。思路虽然有些新意，但是从目标效果的运行逻辑来看，通过改变列表元素的z-index值来实现交替变换其实更符合这个效果逻辑的初衷。 2.那位作者虽然对代码做了一定程度的封装，但封装的还是不很好，在效果的可配置上做的不很好，于是乎，这只能是一个效果，而不能作为一个可配置的插件。 （ps：以上观点纯属就事论事，无任何怀疑此作者功力的意思。且不同人有不同看法。纯属个人观点） 　　所以，我自己也抽空写了个类似的效果，做了一定程度的封装，虽然也只能勉强算个轻量级原生小插件吧，但还是分享出来，并做一步一步的教程，希望能给有需要的朋友一些帮助吧。先上个最终的效果图吧： [img]http://files.jb51.net/upload/201010/20101011195457488.png[/img] 好了，Let's go！开始我们的第一部分吧！ 第一部分我们要达到的目标有： 1.建立一个大的框架，实现变换的逻辑，同时建立良好的代码结构，为以后的功能扩展打好基础。（好的开始是成功的一半！） 2.第一部分要实现的效果为图片自动切换（仅仅是这一个功能）。 　　首先要有清晰地思路，要实现这一个效果，我们一定是调用一个初始化函数init()-->init()中开始变换第一张图片到下一张，不妨暂定这个功能函数为pos()-->要实现自动交替变换，那么肯定需要一个自动变换的功能函数auto()-->auto()中自动变换应该有两个方向，向前和向后，那么这个功能我们也可以通过一个函数来实现，暂定move()-->move()中是指定向上或向下一张变换，那么就可以回归到我们的变换函数pos()中！ 　　那么，我们就建立了一套完整可行的逻辑体系。根据以上逻辑，我们用代码结构来表示如下： 恩，这一部分到此结束吧，下一部分将增加淡入淡出效果和刚才提到了尽量规避闭包引起的内存泄露的优化方案！