http://0818668.com/images/jquery.kinMaxShow-1.0.src.js

1/**
2 +-------------------------------------------------------------------------------------------------------------
3 * [全屏焦点图]插件 jquery.kinMaxShow
4 +-------------------------------------------------------------------------------------------------------------
5 * @author   Mr.kin
6 * @version  1.1
7 * @file  	 jquery.kinMaxShow-1.1.src.js
8 * @info  	 报告BUG、建议、索取最新版本 请Mail：[email protected](注：邮件标题请包含kinMaxShow 以便于邮箱自动归档)
9 * @date  	 2013-08-27
10 +-------------------------------------------------------------------------------------------------------------
11 */
12 
13(function($){
14	$.fn.kinMaxShow = function(user_options){
15			//默认设置
16			var default_options = {
17						//幻灯片高度 默认500
18						height:640,				
19						//幻灯片切换间隔时间 单位:秒
20						intervalTime:6,
21						//幻灯片切换时间 单位：毫秒 ,若设置为0 则无切换效果 直接跳到下一张
22						switchTime:1000,
23						//悬停暂停切换 鼠标停留在kinMaxShow内 是否暂停切换 默认true 悬停暂停，设置为false 悬停不暂停
24						hoverPause:true,
25						//擦除效果(切换) jQuery自带有 "linear" 和 "swing" ,如需要其他擦除效果请使用 jquery.easing.js  插件
26						easing:'linear',
27						//图片对齐方式
28						imageAlign:'center center',
29						//按钮
30						button:{
31								//按钮鼠标切换事件 可选事件 click、mouseover
32								switchEvent:'click',
33								//按钮上是否显示索引数字，从1开始，默认不显示
34								showIndex:false,
35								//按钮样式
36								//正常 按钮样式  支持常规CSS样式，方法同jQuery css({key:val,……})
37								normal:{width:'14px',height:'14px',lineHeight:'14px',right:'10px',bottom:'10px',fontSize:'10px',background:"#cccaca",border:"1px solid #ffffff",color:"#666666",textAlign:'center',marginRight:'8px',fontFamily:"Verdana",float:'left'},
38								//当前 按钮样式
39								focus:{background:"#357416",border:"1px solid #dcdcdc",color:"#000000"}
40							},
41						//切换回调 index 当前图片索引，action 动作 的切入 还是 切出 值:fadeIn或fadeOut ，函数内 this指向 当前图片容器对象 可用来操作里面元素的动作 详情见demo。
42						callback:function(index,action){}
43					
44			};
45			options = jQuery.extend(true,{},default_options,user_options);
46			
47			var k = {};
48			
49			//当前选择符
50			k.selector = $(this).selector;
51			
52			//判断是否有多个对象 如选取了多个对象抛出错误，同一页面可以使用多个 但需要分别调用并且建议选择符用id。
53			if($(this).length>1){
54				$.error('kinMaxShow error[More than one selected object]');
55				return false;	
56			}
57			
58			//当前操作对象
59			k.self = this;
60			//当前图片索引
61			k.index = 0;
62			//前一个图片索引
63			k.lindex = 0;
64			//图片数量
65			k.size = $(k.self).children('div').size();
66			//CSS class命名空间前缀
67			k.prename = 'KMSPrefix_' + k.selector.replace(/\W/ig,'') + '_';
68			//数据存储
69			k.data = {};
70			//支持函数集合
71			k.fn = {};
72			
73			//加载 解析幻灯片宽和高
74			k.onload = function(){
75				//设置容器尺寸 并且暂时隐藏内容部分
76				$(k.self).css({width:'100%',height:options.height,overflow:'hidden',position:'relative'}).children('div').addClass(k.prename+'image_item').hide();
77				//初始化
78				k.init();
79					
80			};			
81			
82			
83			//初始化
84			k.init = function(){
85				
86				k.setLayout();
87				k.setAnimate();
88				
89			};
90		
91			//布局
92			k.setLayout = function(){
93				
94				//image 容器
95				$(k.self).children('div').wrapAll('<div class="'+k.prename+'image_box"></div>');
96				$('.'+k.prename+'image_item',k.self).each(function() {
97                    var a = $(this).children('a');
98					if(a.length){
99						var image = a.children('img').attr('src');
100						a.children('img').remove();
101						a.addClass(k.prename+'coverlink');
102					}else{
103						var image = $(this).children('img').attr('src');
104						$(this).children('img').remove();		
105					}
106					//
107					$(this).css({background:'url('+image+') no-repeat '+options.imageAlign,'z-index':1});
108					
109                });
110				
111				$('.'+k.prename+'image_item',k.self).eq(0).css('z-index','2');
112				
113				//button 容器
114				if(options.button.normal.display!='none'){
115					var button_list = '';
116					for(i=1;i<=k.size;i++){
117						if(options.button.showIndex){
118							button_list+='<li>'+i+'</li>';
119						}else{
120							button_list+='<li> </li>';	
121						}
122					}				
123					$(k.self).append('<ul class="'+k.prename+'button">'+button_list+'</ul>');
124					$('.'+k.prename+'button li',k.self).eq(0).addClass(k.prename+'focus');
125				}
126				
127				//设置 css
128				k.setCSS();	
129				
130				//显示内容
131				$('.'+k.prename+'image_item:gt(0)',k.self).css('z-index',1).css({opacity:0}

131);
132				$('.'+k.prename+'image_item',k.self).show();
133				$(k.self).css({overflow:'visible',visibility:'visible',display:'block'});
134
135				
136			};
137			
138			//CSS
139			k.setCSS = function(){
140				
141			var cssCode = '<style type="text/css">';
142				cssCode+= k.selector+' *{ margin:0;padding:0;} ';
143				cssCode+= k.selector+' .'+k.prename+'image_box{width:100%;height:'+parseInt(options.height)+'px;position:relative;z-index:1;} ';
144				cssCode+= k.selector+' .'+k.prename+'image_box .'+k.prename+'image_item{width:100%;height:'+parseInt(options.height)+'px;position:absolute;overflow:hidden;} ';
145				cssCode+= k.selector+' .'+k.prename+'image_box .'+k.prename+'image_item a.'+k.prename+'coverlink{width:100%;height:'+parseInt(options.height)+'px;display:block;text-decoration:none;padding:0;margin:0;background:transparent;text-indent:0;outline:none;hide-focus:expression(this.hideFocus=true);} ';
146				if(options.button.normal.display!='none'){
147					cssCode+= k.selector+' .'+k.prename+'button{'+k.fn.objToCss(options.button.normal,['top','right','bottom','left'],true)+';position:absolute;list-style:none;z-index:2;overflow:hidden;_zoom:1;}';				
148					cssCode+= k.selector+' .'+k.prename+'button li{'+k.fn.objToCss(options.button.normal,['top','right','bottom','left'])+';cursor:pointer;-webkit-text-size-adjust:none;}';				
149					cssCode+= k.selector+' .'+k.prename+'button li.'+k.prename+'focus{'+k.fn.objToCss(options.button.focus,['top','right','bottom','left'])+';cursor:default;}';				
150				}
151				cssCode+= '</style>';
152				$(k.self).prepend(cssCode);
153					
154			}
155			
156			//动画管理
157			k.setAnimate = function(){
158				
159				options.callback.call($('.'+k.prename+'image_item:eq('+k.index+')',k.self),k.index,'fadeIn');
160				
161				var overDelayTimer;//当switchEvent是mouseover时  执行延迟计时器
162				$('.'+k.prename+'button',k.self).delegate('li',options.button.switchEvent,function(){
163					_this = this;
164					function setChange(){
165						k.index = $(_this).index();
166						k.setOpacity();
167					}
168					if(options.button.switchEvent=='mouseover'){
169						overDelayTimer = setTimeout(setChange,200);
170					}else{
171						setChange();
172					}
173				})
174				//mouseover 延时
175				if(options.button.switchEvent=='mouseover'){
176					$('.'+k.prename+'button',k.self).delegate('li','mouseout',function(){
177						clearTimeout(overDelayTimer);
178					})						
179				}				
180				
181				//设置索引
182				k.index  = 1;
183				k.lindex = 0;
184				//自动切换定时器
185				k.data.moveTimer = setInterval(k.setOpacity,options.intervalTime*1000+options.switchTime);
186				
187				//悬停暂停
188				if(options.hoverPause){	
189					$(k.self).hover(function(){
190						clearInterval(k.data.moveTimer);
191					},function(){
192						k.data.moveTimer = setInterval(k.setOpacity,options.intervalTime*1000+options.switchTime);
193					})
194				}
195
196			};
197			
198			//擦除(切换)
199			k.setOpacity = function(){
200				
201				//回调 fadeOut callback
202				options.callback.call($('.'+k.prename+'image_item:eq('+(k.lindex)+')',k.self),k.lindex,'fadeOut');
203				//按钮切换
204				if(options.button.normal.display!='none'){
205					$('ul.'+k.prename+'button li',k.self).removeClass(k.prename+'focus');
206					$('ul.'+k.prename+'button li',k.self).eq(k.index).addClass(k.prename+'focus');
207				}
208				
209				//停止执行中的动画
210				$('.'+k.prename+'image_item:animated',k.self).stop(true,false);
211				//设置上一个显示的z-index为0
212				$('.'+k.prename+'image_item',k.self).css('z-index',1);
213				//设置当前显示的z-index为1
214				$('.'+k.prename+'image_item',k.self).eq(k.index).css({opacity:0,'z-index':2});
215	  			//alert(k.index)
216				$('.'+k.prename+'image_item',k.self).eq(k.index).animate({opacity:1},options.switchTime,options.easing,function(){
217						$('.'+k.prename+'image_box .'+k.prename+'image_item:not(:eq('+k.index+'))',k.self).css({opacity:0});
218						//回调 fadeIn callback
219						options.callback.call($('.'+k.prename+'image_item:eq('+k.index+')',k.self),k.index,'fadeIn');
220						k.lindex = k.index;
221						if(k.index==k.size-1){
222							k.index=0;
223						}else{
224							k.index++;
225						}
226					}
227				);
228				
229			};
230			
231			//运行			
232			k.run = function(){
233				k.onload();
234			};
235			
236			/* obj 对象样式，带有"-"的需要转为驼峰式写法 如：font-size:12px; fontSize:12px;  excArr:不需要转换的列表排除在外的 类型 数组 ['test1','opacity'] 若excFlag为ture则只转换excArr数组中的CSS*/
237			k.fn.objToCss = function(obj,excArr,excFlag){

238				excFlag = excFlag?true:false;
239				var isIE = navigator.userAgent.indexOf("MSIE")!=-1;
240				var style = '';
241				if(excFlag){
242					for (var key in obj){
243						if($.inArray(key,excArr)!=-1){
244							pKey = key.replace(/([A-Z])/,KtoLowerCase);
245							if(pKey=='opacity' && isIE){
246								style +="filter:alpha(opacity="+(obj[key]*100)+");";
247							}else{
248								style +=pKey+":"+obj[key]+";";	
249							}
250						}
251					};					
252				}else{
253					for (var key in obj){
254						if($.isArray(excArr)){
255							if($.inArray(key,excArr)==-1){
256								pKey = key.replace(/([A-Z])/,KtoLowerCase);
257								if(pKey=='opacity' && isIE){
258									style +="filter:alpha(opacity="+(obj[key]*100)+");";
259								}else{
260									style +=pKey+":"+obj[key]+";";	
261								}
262							}
263						}else{
264							pKey = key.replace(/([A-Z])/,KtoLowerCase);
265							if(pKey=='opacity' && isIE){
266								style +="filter:alpha(opacity="+(obj[key]*100)+");";
267							}else{
268								style +=pKey+":"+obj[key]+";";	
269							}					 
270						}
271					};	
272				}
273				
274				
275				function KtoLowerCase(word){
276					var str='';
277					str = '-'+word.toLowerCase();
278					return str; 
279				};
280				return style;
281			};
282			
283			/* 运行 */
284			k.run();
285
286		
287		
288	}	
289	
290})(jQuery)