/**
+-------------------------------------------------------------------------------------------------------------
* [全屏焦点图]插件 jquery.kinmaxshow
+-------------------------------------------------------------------------------------------------------------
* @author mr.kin
* @version 1.1
* @file jquery.kinmaxshow-1.1.src.js
* @info 报告bug、建议、索取最新版本 请mail:mr.kin@foxmail.com(注:邮件标题请包含kinmaxshow 以便于邮箱自动归档)
* @date 2013-08-27
+-------------------------------------------------------------------------------------------------------------
*/
(function($){
$.fn.kinmaxshow = function(user_options){
//默认设置
var default_options = {
//幻灯片高度 默认500
height:500,
//幻灯片切换间隔时间 单位:秒
intervaltime:6,
//幻灯片切换时间 单位:毫秒 ,若设置为0 则无切换效果 直接跳到下一张
switchtime:1000,
//悬停暂停切换 鼠标停留在kinmaxshow内 是否暂停切换 默认true 悬停暂停,设置为false 悬停不暂停
hoverpause:true,
//擦除效果(切换) jquery自带有 "linear" 和 "swing" ,如需要其他擦除效果请使用 jquery.easing.js 插件
easing:'linear',
//图片对齐方式
imagealign:'center center',
//按钮
button:{
//按钮鼠标切换事件 可选事件 click、mouseover
switchevent:'click',
//按钮上是否显示索引数字,从1开始,默认不显示
showindex:false,
//按钮样式
//正常 按钮样式 支持常规css样式,方法同jquery css({key:val,……})
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'},
//当前 按钮样式
focus:{background:"#cc0000",border:"1px solid #ff0000",color:"#000000"}
},
//切换回调 index 当前图片索引,action 动作 的切入 还是 切出 值:fadein或fadeout ,函数内 this指向 当前图片容器对象 可用来操作里面元素的动作 详情见demo。
callback:function(index,action){}
};
options = jquery.extend(true,{},default_options,user_options);
var k = {};
//当前选择符
k.selector = $(this).selector;
//判断是否有多个对象 如选取了多个对象抛出错误,同一页面可以使用多个 但需要分别调用并且建议选择符用id。
if($(this).length>1){
$.error('kinmaxshow error[more than one selected object]');
return false;
}
//当前操作对象
k.self = this;
//当前图片索引
k.index = 0;
//前一个图片索引
k.lindex = 0;
//图片数量
k.size = $(k.self).children('div').size();
//css class命名空间前缀
k.prename = 'kmsprefix_' + k.selector.replace(/\w/ig,'') + '_';
//数据存储
k.data = {};
//支持函数集合
k.fn = {};
//加载 解析幻灯片宽和高
k.onload = function(){
//设置容器尺寸 并且暂时隐藏内容部分
$(k.self).css({width:'100%',height:options.height,overflow:'hidden',position:'relative'}).children('div').addclass(k.prename+'image_item').hide();
//初始化
k.init();
};
//初始化
k.init = function(){
k.setlayout();
k.setanimate();
};
//布局
k.setlayout = function(){
//image 容器
$(k.self).children('div').wrapall('
');
$('.'+k.prename+'image_item',k.self).each(function() {
var a = $(this).children('a');
if(a.length){
var image = a.children('img').attr('src');
a.children('img').remove();
a.addclass(k.prename+'coverlink');
}else{
var image = $(this).children('img').attr('src');
$(this).children('img').remove();
}
//
$(this).css({background:'url('+image+') no-repeat '+options.imagealign,'z-index':1});
});
$('.'+k.prename+'image_item',k.self).eq(0).css('z-index','2');
//button 容器
if(options.button.normal.display!='none'){
var button_list = '';
for(i=1;i<=k.size;i++){
if(options.button.showindex){
button_list+=''+i+'';
}else{
button_list+=' ';
}
}
$(k.self).append('');
$('.'+k.prename+'button li',k.self).eq(0).addclass(k.prename+'focus');
}
//设置 css
k.setcss();
//显示内容
$('.'+k.prename+'image_item:gt(0)',k.self).css('z-index',1).css({opacity:0});
$('.'+k.prename+'image_item',k.self).show();
$(k.self).css({overflow:'visible',visibility:'visible',display:'block'});
};
//css
k.setcss = function(){
var csscode = '';
$(k.self).prepend(csscode);
}
//动画管理
k.setanimate = function(){
options.callback.call($('.'+k.prename+'image_item:eq('+k.index+')',k.self),k.index,'fadein');
var overdelaytimer;//当switchevent是mouseover时 执行延迟计时器
$('.'+k.prename+'button',k.self).delegate('li',options.button.switchevent,function(){
_this = this;
function setchange(){
k.index = $(_this).index();
k.setopacity();
}
if(options.button.switchevent=='mouseover'){
overdelaytimer = settimeout(setchange,200);
}else{
setchange();
}
})
//mouseover 延时
if(options.button.switchevent=='mouseover'){
$('.'+k.prename+'button',k.self).delegate('li','mouseout',function(){
cleartimeout(overdelaytimer);
})
}
//设置索引
k.index = 1;
k.lindex = 0;
//自动切换定时器
k.data.movetimer = setinterval(k.setopacity,options.intervaltime*1000+options.switchtime);
//悬停暂停
if(options.hoverpause){
$(k.self).hover(function(){
clearinterval(k.data.movetimer);
},function(){
k.data.movetimer = setinterval(k.setopacity,options.intervaltime*1000+options.switchtime);
})
}
};
//擦除(切换)
k.setopacity = function(){
//回调 fadeout callback
options.callback.call($('.'+k.prename+'image_item:eq('+(k.lindex)+')',k.self),k.lindex,'fadeout');
//按钮切换
if(options.button.normal.display!='none'){
$('ul.'+k.prename+'button li',k.self).removeclass(k.prename+'focus');
$('ul.'+k.prename+'button li',k.self).eq(k.index).addclass(k.prename+'focus');
}
//停止执行中的动画
$('.'+k.prename+'image_item:animated',k.self).stop(true,false);
//设置上一个显示的z-index为0
$('.'+k.prename+'image_item',k.self).css('z-index',1);
//设置当前显示的z-index为1
$('.'+k.prename+'image_item',k.self).eq(k.index).css({opacity:0,'z-index':2});
//alert(k.index)
$('.'+k.prename+'image_item',k.self).eq(k.index).animate({opacity:1},options.switchtime,options.easing,function(){
$('.'+k.prename+'image_box .'+k.prename+'image_item:not(:eq('+k.index+'))',k.self).css({opacity:0});
//回调 fadein callback
options.callback.call($('.'+k.prename+'image_item:eq('+k.index+')',k.self),k.index,'fadein');
k.lindex = k.index;
if(k.index==k.size-1){
k.index=0;
}else{
k.index++;
}
}
);
};
//运行
k.run = function(){
k.onload();
};
/* obj 对象样式,带有"-"的需要转为驼峰式写法 如:font-size:12px; fontsize:12px; excarr:不需要转换的列表排除在外的 类型 数组 ['test1','opacity'] 若excflag为ture则只转换excarr数组中的css*/
k.fn.objtocss = function(obj,excarr,excflag){
excflag = excflag?true:false;
var isie = navigator.useragent.indexof("msie")!=-1;
var style = '';
if(excflag){
for (var key in obj){
if($.inarray(key,excarr)!=-1){
pkey = key.replace(/([a-z])/,ktolowercase);
if(pkey=='opacity' && isie){
style +="filter:alpha(opacity="+(obj[key]*100)+");";
}else{
style +=pkey+":"+obj[key]+";";
}
}
};
}else{
for (var key in obj){
if($.isarray(excarr)){
if($.inarray(key,excarr)==-1){
pkey = key.replace(/([a-z])/,ktolowercase);
if(pkey=='opacity' && isie){
style +="filter:alpha(opacity="+(obj[key]*100)+");";
}else{
style +=pkey+":"+obj[key]+";";
}
}
}else{
pkey = key.replace(/([a-z])/,ktolowercase);
if(pkey=='opacity' && isie){
style +="filter:alpha(opacity="+(obj[key]*100)+");";
}else{
style +=pkey+":"+obj[key]+";";
}
}
};
}
function ktolowercase(word){
var str='';
str = '-'+word.tolowercase();
return str;
};
return style;
};
/* 运行 */
k.run();
}
})(jquery)