$(function() { $("#kinmaxshow").kinmaxshow({ height: 457, button: { //按钮鼠标切换事件 可选事件 click、mouseover switchevent: 'click', //按钮上是否显示索引数字,从1开始,默认不显示 showindex: false, //按钮样式 //正常 按钮样式 支持常规css样式,方法同jquery css({key:val,……}) normal: { width: '30px', height: '10px', lineheight: '22px', right: '47%', bottom: '10px', fontsize: '12px', background: "#ddd", border: "0 solid #ffffff", color: "#000", textalign: 'center', marginright: '5px', fontfamily: "verdana", float: 'left' }, //当前 按钮样式 focus: { background: "#f79004", border: "0 solid #ff0000", color: "#f79004" } }, callback: function(index, action) { switch (index) { case 5: if (action == 'fadein') { $(this).find('.sub_1_1').animate({ left: '30px', opacity: 1 }, 1000); $(this).find('.sub_1_2').animate({ right: '0', opacity: 1 }, 1000) } else { $(this).find('.sub_1_1').animate({ left: '-100px', opacity: 0 }, 900); $(this).find('.sub_1_2').animate({ right: '-100px', opacity: 0 }, 900) }; break; case 6: if (action == 'fadein') { $(this).find('.sub_2_1').animate({ left: '30px', opacity: 1 }, 1000); $(this).find('.sub_2_2').animate({ right: '30px', opacity: 1 }, 1000) } else { $(this).find('.sub_2_1').animate({ left: '-100px', opacity: 0 }, 900); $(this).find('.sub_2_2').animate({ right: '-100px', opacity: 0 }, 900) }; break; case 7: if (action == 'fadein') { $(this).find('.sub_3_1').animate({ top: '160', opacity: 1 }, 1000) } else { $(this).find('.sub_3_1').animate({ top: '200', opacity: 0 }, 900) }; break; } } }); $(".block-1 a").hover(function() { $(this).find('span').animate({ margintop: '-60px' }, 600); }, function() { $(this).find('span').animate({ margintop: '0' }, 300); }); }); /** +------------------------------------------------------------------------------------------------------------- * [全屏焦点图]插件 jquery.kinmaxshow +------------------------------------------------------------------------------------------------------------- * @author mr.kin * @version 1.0 * @file jquery.kinmaxshow-1.0.src.js * @info 报告bug、建议、索取最新版本 请mail:mr.kin@foxmail.com(注:邮件标题请包含kinmaxshow 以便于邮箱自动归档) * @date 2013-07-07 +------------------------------------------------------------------------------------------------------------- */ (function($){ $.fn.kinmaxshow = function(user_options){ //默认设置 var default_options = { //幻灯片高度 默认500 height:297, //幻灯片切换间隔时间 单位:秒 intervaltime:6, //幻灯片切换时间 单位:毫秒 ,若设置为0 则无切换效果 直接跳到下一张 switchtime:1000, //擦除效果(切换) 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:'165px',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 = 'kinmaxshow_'; //数据存储 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.setdata(); k.setlayout(); k.setanimate(); }; //数据 k.setdata = function(){ k.data.title = new array(); $(k.self).children('div').each(function(){ k.data.title.push($(this).find('img').attr('alt')); }) }; //布局 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(); }else{ var image = $(this).children('img').attr('src'); $(this).children('img').remove(); } // $(this).css({background:'url('+image+') no-repeat '+options.imagealign,'z-index':0}); }); $('.'+k.prename+'image_item',k.self).eq(0).css('z-index','1'); //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('focus'); } //设置 css k.setcss(); //显示内容 $('.'+k.prename+'image_item:gt(0)',k.self).css('z-index',0).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); }; //擦除(切换) k.setopacity = function(){ //回调 fadeout callback options.callback.call($('.'+k.prename+'image_item:eq('+(k.lindex)+')',k.self),k.lindex,'fadeout'); //清除切换定时器 clearinterval(k.data.movetimer); //按钮切换 if(options.button.normal.display!='none'){ $('ul.'+k.prename+'button li',k.self).removeclass('focus'); $('ul.'+k.prename+'button li',k.self).eq(k.index).addclass('focus'); } //停止执行中的动画 $('.'+k.prename+'image_item:animated',k.self).stop(true,false); //设置上一个显示的z-index为0 $('.'+k.prename+'image_item',k.self).css('z-index',0); //设置当前显示的z-index为1 $('.'+k.prename+'image_item',k.self).eq(k.index).css({opacity:0,'z-index':1}); $('.'+k.prename+'image_item',k.self).eq(k.index).animate({opacity:1},{duration:options.switchtime,easing:options.easing,complete: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.data.movetimer = setinterval(k.setopacity,options.intervaltime*1000+options.switchtime); 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) //$( "#tabs-1" ).tabs({event:"mouseover"});