标签：style blog color io os 使用 ar for 数据
1 <!--=============首页banner图开始===============--> 2 <div id="kinMaxShow"> 3 <div><a href="indexwebox.html" target="_blank"><img src="images/index1.png" width="1920" height="739" /></a></div> 4 <div><a href="indexwebox.html" target="_blank"><img src="images/index2.png" width="1920" height="739" /></a></div> 5 </div> 6 <!--=============首页banner图结束===============-->
$(function(){
$("#kinMaxShow").kinMaxShow();
});
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：Mr.kin@foxmail.com(注：邮件标题请包含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:736, 19 //幻灯片切换间隔时间 单位:秒 20 intervalTime:3, 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:‘4px‘,height:‘4px‘,lineHeight:‘14px‘,right:‘10px‘,bottom:‘10px‘,fontSize:‘10px‘,background:"#8dc93a",border:"1px solid #ffffff",color:"#666666",textAlign:‘center‘,marginRight:‘8px‘,fontFamily:"Verdana",float:‘left‘}, 38 //当前 按钮样式 39 focus:{background:"#8dc93a",border:"1px solid #8dc93a",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}); 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)
标签：style blog color io os 使用 ar for 数据
原文地址：http://www.cnblogs.com/yiliweichinasoft/p/3966210.html
