首页 > 代码库 > 图片轮播
图片轮播
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 =http://www.mamicode.com/ {}; 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 //设置 css128 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 //CSS139 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 callback202 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为0212 $(‘.‘+k.prename+‘image_item‘,k.self).css(‘z-index‘,1);213 //设置当前显示的z-index为1214 $(‘.‘+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 callback219 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)
图片轮播
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。