制作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
};

然后使用函数pSlideShow就能看到效果了。

$('#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数据包括图片和信息添加到元素上去
},

步骤四，添加pagination，我是利用小圆点做分页按钮。

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);
},

步骤五，接下来就是slide show的一个重点了，图片转换时的动画animation。

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
};

创建setting，然后再添加插件的函数pSlideShow就行了。

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

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