制作jQuery slide show 插件手记

Slide show 网上会有很多形形色色的案例，先来说说Slide show的大致几种做法。（PS：排除flash）

架构（可能说的有点大）方面：

1. 是只用一个img标签，然后用js来替换里面的src，好处和坏处都很明显，好处是加载网页速度快，坏处是变换图片的时候比较麻烦。

2. 一次性创建多个img标签，然后显示一个，其余隐藏起来，好处是变换图片的时候会比较顺，坏处就是加载网页速度相对较慢，而且图片太多的时候也不适合。

3. 创建固定的3到4个img标签，然后显示其中一个，其其余隐藏，变换图片的时候，按顺序把最前面或者最后面的图片load出来。显然这个方法是容错率最高的。

图片变换动画方面：

1. 用原生态的jQuery fadeIn，fadeOut和animate函数。

2. 用javascript的setInterval函数制作效果。

3. 虽然也是用定时器，但是像http://nivo.dev7studios.com/这种图片会一块一块消失的动画，是在图片上面添加了N多个div，然后设置其背景，从而拼成了原来的图片，之后根据定时器，一个个消失，做成了这种效果。

下面进入正题，因为这只是为了学习插件的一个小项目，所以一切以简单为原则，用的第一种架构和jQuery的fadeIn&fadeOut函数来实现这个插件。另外，这个插件也是为了自己一个网站所做，所以是内嵌式的，省去了一些功能。

思路：

1. 为了更容易的使用这个插件，运用jQuery提供的$.extend($.fn, {pSlideShow：function(){...}})。pSlideShow就是插件函数名，可以直接在某个dom里面加上slide show。

2. 因为要内嵌在网页，所以高宽肯定得是可以自定义的，图片也得是自定义的。嵌入式的slideshow一般都用于新闻概要，所以一些简单的新闻信息也是要的。所以自定义的信息为高宽，图片url以及图片信息。

3. slideshow的所有的节点都是由JS添加上去，但是样式还是得靠CSS控制，所以在代码中要加载CSS。

4. 一个slideshow类。

终上所述，实现以后的插件使用方法：

比如代码中有个<div id=“slideshow”></div>

然后在JS中先自定义数据

$('#slideShow').pSlideShow(setting);

PS： 真是看人挑担不吃力，写这种简单的技术文就觉得好吃力，写了好久，这个很锻炼人的表述能力。以后，应该多写写