制作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中先自定义数据
var imgArr =
[{url: "1.jpg", text: "我是1"},
{url: "2.jpg", text: "我是2"},
{url: "3.jpg", text: "我是3"},
{url: "4.jpg", text: "我是4"}];
var setting = {
height: 300,
width: 400,
imgArr: imgArr
};$('#slideShow').pSlideShow(setting);
步骤1，SlideShow类代码：
var SlideShow = function (setting, parent) {
this.parent = parent; //为了能操作得到Dom的节点
this.parent.css("position", "relative");
this.height = setting.height; //定义高宽
this.width = setting.width;
this.parent.css("height", this.height);
this.parent.css("width", this.width);
this.index = 0;
this.pageDots = [];
this.imgUrlArr = imgArr;
this.addImgElem(); //下面3个函数下面会定义
this.loadPagination();
this.animation();
}步骤2，像写其他类一样，添加SlideShow的prototype属性：
SlideShow.prototype = {...}
步骤3，要把Dom元素利用JS添加到页面上去，所以代码如下：addImgElem: function() {
var imgDom = $("<div></div>");
var img = $("<img src='' />");
this.img = img;
img.css("height", this.height);
img.css("width", this.width);
imgDom.append(img);
var text = $("<div id='imgInfo'><span id='imgText'></span></div>");
imgDom.append(text);
text.css("width", this.width);
this.parent.append(imgDom);
this.imgDom = imgDom;
this.setImgInfo(this.imgUrlArr[0]); //把image数据包括图片和信息添加到元素上去
},loadPagination: function() {
pagination = $("<div id='pagination'></div>");
var self = this;
for (var i = 0; i < this.imgUrlArr.length; i++) { //根据图片数量添加
var dot = $("<span class='dot'></span>");
dot.click(function(index){return function(){
self.dotClick(index);
}}(i));
pagination.append(dot);
this.pageDots.push(dot);
}
this.pageDots[0].addClass("current");
pagination.append("<div class='clear'></div>");
this.parent.append(pagination);
},
animation: function() {
var self = this;
this.listener = setInterval(function() { //利用setInterval来进行定时幻灯片游览
if (++self.index >= self.imgUrlArr.length) {
self.index = 0;
}
self.loadPage(self.index);
}, 4000)
},
loadPage: function(index) {
var self = this;
this.imgDom.fadeOut(1000, function() { //现有图片渐变消失
self.setImgInfo(self.imgUrlArr[index]);
$("#pagination .current").removeClass("current"); //利用current class来区分分页
self.pageDots[index].addClass("current");
self.imgDom.fadeIn(1000); //1秒后，转换的图片渐变显示
});
},
插件用法：
下载代码，地址：http://download.csdn.net/detail/ycscholes/4500143，然后解压缩，新建html页面，在所需要添加slideshow处增加一个带id的div元素像这样
<div id=“slideshow”></div>，然后include文件夹内的jquery-1.7.2.min.js和slideshow.js，然后在自己的js代码中按格式
var imgArr =
[{url: "1.jpg", text: "我是1"},
{url: "2.jpg", text: "我是2"},
{url: "3.jpg", text: "我是3"},
{url: "4.jpg", text: "我是4"}];
var setting = {
height: 300,
width: 400,
imgArr: imgArr
};$('#slideShow').pSlideShow(setting);PS： 真是看人挑担不吃力，写这种简单的技术文就觉得好吃力，写了好久，这个很锻炼人的表述能力。以后，应该多写写