一个焦点图插件

focusImage.js

/**
* FireImg
* by ron 2012.9
*
**/
(function($){
  
	function FireImg(el,setting){
		var self = this;
		var IntervalId;
		self.imgNum = 0;
		self.showingImgIndex = 0;
		self.init = function(){
			self.imgNum = $(el).children("img").length;
			$(el).css({"position":"relative","width":setting.width,"height":setting.height,"overflow":"hidden"});
			$(el).children("img").wrapAll('<div class="fireimg_content" style="position:relative"></div>');
			$(".fireimg_content").children("img").each(function(index, element) {
				if(setting.animateType=="horizontal")
				{
					$(this).css({"position":"absolute","left":setting.width*-index,"top":"0px"});
				}else{
					$(this).css({"position":"absolute","top":setting.height*-index,"left":"0px"});
				}
				
				if(setting.numButton){
					var btnId = "#btn"+index;
					$(el).append('<span id="btn'+index+'" style="position:absolute;padding:5px 10px; font-size:20px;display:block; color:#fff; cursor:pointer">'+(index+1)+'</span>');
					$(el).children(btnId).css({"right":$(btnId).outerWidth()*(self.imgNum-(index+1))+20,"bottom":"0px"}).click(function(e) {
						self.goto(index);
					}).hover(
						function(e) {
							$(btnId).stop(true,true).animate({fontSize:"36px"},200);
						},
						function(e) {
							$(btnId).stop(true,true).animate({fontSize:"20px"},200);
						}
					);
				}
				
			});
			if(setting.autoPlay==true){
				self.autoPlayStart();
				}
			$(el).hover(
				function(e){
					self.autoPlayPuse();
					},
				function(e){
					self.autoPlayStart();
					}
				);
			}
		
		self.autoPlayStart = function(){				
			IntervalId = setInterval(function(){
								if($(".fireimg_content").is(":animated")){
									
									}else{
									 self.next();	
										}
								
							},setting.autoPlayTime);
			}
		self.autoPlayPuse= function(){
			if(IntervalId!=''){
				clearInterval(IntervalId);
				}
			}
		self.next = function(){
			self.showingImgIndex>=self.imgNum-1?self.goto(0):self.goto(self.showingImgIndex+1);			
			}
		self.prev = function(){
			self.showingImgIndex<=0?self.goto(self.imgNum-1):self.goto(self.showingImgIndex-1);
						
			}
		self.goto = function(index,fn){
			if(index>=0&&index<self.imgNum){
				self.showingImgIndex = index;
				if(setting.animateType=="horizontal"){
					$(".fireimg_content").stop(true,true).animate({marginLeft:index*setting.width},setting.changeTime,"swing",fn);
				}else{
					$(".fireimg_content").stop(true,true).animate({marginTop:index*setting.height},setting.changeTime,"swing",fn);
				}
				
				}
			}
		self.getSelectedElement = function(){
			return $(el).children("img").eq(self.showingImgIndex);
			}
		self.init();
		}
	var defaults = {
		width:1000,
		height:300,
		animateType:"horizontal",
		changeTime:500,
		numButton:true,
		autoPlay:true,
		autoPlayTime:2500
	};
	$.fn.fireImg=function(options){
		var callArgs = $.makeArray(arguments).slice(1);
		this.each(function () {
			if (!this.fireImg) {
				var img = new FireImg(this,$.extend({}, defaults, options || {}));
				this.fireImg = img;
			}
			else if (typeof (options) == 'string') {
				var method = this.fireImg[options];//得到fireImg中名为options的函数
				if (typeof method == 'function') {
					return method.apply(this.fireImg, callArgs);
				}
				else {
					throw 'not support option: ' + options;
				}
			}
		});
		return this;
		}
	
})(jQuery);