当前位置: 代码迷 >> Web前端 >> 打造jQuery slide show 插件手记
  详细解决方案

打造jQuery slide show 插件手记

热度:665   发布时间:2012-09-02 21:00:34.0
制作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: 真是看人挑担不吃力,写这种简单的技术文就觉得好吃力,写了好久,这个很锻炼人的表述能力。以后,应该多写写








  相关解决方案