完美兼容各大浏览器的jQuery插件实现图片切换特效
文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件),对网友们的学习是很有帮助的,虽然样式不太好看,大家可以自己写,好好利用哦。。。
JS代码部分:
(function($){ var//申明全局变量 _eleTemp,//缓存变量 _eleThis=$(this),//当前元素 _eleImg=$('.zd-imgChange-img'),//图片组元素 _eleControll=$('.zd-imgChange-controll'),//控制器组元素 _eleChange=$('.zd-imgChange-change'),//切换元素 _icon='●○',//动态图标 _imgTemplate=$(document.createElement('img')),//图片模版' _setting={ height:100,//高 width:200,//宽 imgs:newArray(),//图片地址 links:null,//点击地址 tips:null,//图片说明 timers:3000//自动切换时间 },//配置 _timers=null//自动切换保存变量 $.fn.zoeDylan_ImageChange=function(op){ _eleThis=$(this); _setting=$.extend(_setting,op);//设置属性 //处理数据(查看是否为合法范围) _setting.timers=_setting.timers!=null&&_setting.timers!=undefined&&_setting.timers>1000?_setting.timers:1000; _setting.height=parseFloat(_setting.height)<100?100:parseFloat(_setting.height); _setting.width=parseFloat(_setting.width)<200?200:parseFloat(_setting.width); returnthis.each(function(){//初始化 AddTemplate(); AddImg(); DisSize(); DisControll(); }) } //添加模版 functionAddTemplate(){ _eleThis.removeClass(); _eleThis.addClass('zd-imgChange'); _eleTemp='<buttonclass="zd-imgChange-changezd-imgChange-change-left"><</button>'; _eleThis.append(_eleTemp); _eleTemp=' <divclass="zd-imgChange-img"> </div>'; _eleThis.append(_eleTemp); _eleTemp=' <divclass="zd-imgChange-controll"></div>'; _eleThis.append(_eleTemp); _eleTemp='<buttonclass="zd-imgChange-changezd-imgChange-change-right">></button>'; _eleThis.append(_eleTemp); //给全局变量赋值 _eleImg=$('.zd-imgChange-img'); _eleControll=$('.zd-imgChange-controll'); _eleChange=$('.zd-imgChange-change'); } //添加图片 functionAddImg(){ for(vari=0;i<_setting.imgs.length;i++){ //图片 _eleTemp=$(document.createElement('img')); _eleTemp.addClass('zd-imgChange-img-item'); _eleTemp.attr('src',_setting.imgs[i]); _eleImg.append(_eleTemp); //图标 _eleControll.append('<span>'+_icon[1]+'</span>'); //提示 $(_eleImg.children('img')[i]).attr({'title':_setting.tips[i]+'|'+_setting.links[i]}); $(_eleControll.children('span')[i]).attr('title',_setting.tips[i]); } Dispose(0,'TtoB'); } //处理尺寸 functionDisSize(){ _eleThis.css({'height':_setting.height,'width':_setting.width,'font-size':_setting.height*0.2-2}); _eleThis.children('button').css('font-size',_setting.height*0.2-2); _eleChange.css({'line-height':_setting.height+'px'}); } //处理操作事件 functionDisControll(){ _eleImg.children('img').bind('click',function(){//点击图片跳转 document.location='http://'+$(this).attr('title').split('|')[$(this).attr('title').split('|').length-1]; }); _eleChange.bind('click',function(){//顺序切换图片 varnowImg=$('.zd-imgChange-img-item-sel'); _eleTemp=_eleImg.children('img'); if($(this).hasClass('zd-imgChange-change-left')){//向左切换 for(vari=0;i<_eleTemp.length;i++){ if(nowImg.attr('title')==$(_eleTemp[i]).attr('title')){ if((i-1)<0){ Dispose(_eleTemp.length-1,'RtoL'); }else{ Dispose(i-1,'RtoL'); } break; } } }elseif($(this).hasClass('zd-imgChange-change-right')){//向右切换 for(vari=0;i<_eleTemp.length;i++){ if(nowImg.attr('title')==$(_eleTemp[i]).attr('title')){ if((i+1)>_eleTemp.length-1){ Dispose(0,'LtoR'); }else{ Dispose(i+1,'LtoR'); } break; } } }else{ returnfalse; } }); _eleControll.children('span').bind('click',function(){ for(vari=0;i<_eleControll.children('span').length;i++){ if($(_eleControll.children('span')[i]).attr('title')==$(this).attr('title')){ if($(_eleImg.children('img')[i]).attr('src')!=$('.zd-imgChange-img-item-sel').attr('src')){//判断是否点击的同一个标签 Dispose(i,'TtoB'); } break; } } }); } //切换器 functionDispose(eNum,dir){//切换图片 clearTimeout(_timers); DisposeAnm(); $(_eleControll.children('span')).html(_icon[1]); $(_eleControll.children('span')[eNum]).html(_icon[0]); $('.zd-imgChange-change-left').attr('title',eNum-1>=0?$(_eleControll.children('span')[eNum-1]).attr('title'):$(_eleControll.children('span')[_eleControll.children('span').length-1]).attr('title')); $('.zd-imgChange-change-right').attr('title',eNum+1<=_eleControll.children('span').length-1?$(_eleControll.children('span')[eNum+1]).attr('title'):$(_eleControll.children('span')[0]).attr('title')); _timers=setTimeout(Timers,_setting.timers); //切换动画--根据z-index实现视觉效果 functionDisposeAnm(){ $('.zd-imgChange-img-item').removeClass('zd-imgChange-img-item-temp'); $('.zd-imgChange-img-item-sel').removeClass('zd-imgChange-img-item-sel').addClass('zd-imgChange-img-item-temp'); _eleTemp=$(_eleImg.children('img')[eNum]).addClass('zd-imgChange-img-item-sel'); if(dir=='TtoB'){ _eleTemp.css('top',-_setting.height); _eleTemp.animate({top:0},300); }elseif(dir=='RtoL'){ _eleTemp.css('left',_setting.width); _eleTemp.animate({left:0},300); }elseif(dir=='LtoR'){ _eleTemp.css('left',-_setting.width); _eleTemp.animate({left:0},300); } } } //自动切换时钟 functionTimers(){ _timers=setTimeout(Timers,_setting.timers); varnowImg=$('.zd-imgChange-img-item-sel'); _eleTemp=_eleImg.children('img'); for(vari=0;i<_eleTemp.length;i++){ if(nowImg.attr('title')==$(_eleTemp[i]).attr('title')){ if((i-1)<0){ Dispose(_eleTemp.length-1,'TtoB'); }else{ Dispose(i-1,'TtoB'); } break; } } } })($)
CSS代码部分:
.zd-imgChange{ position:relative; margin:auto; padding:0px; min-width:200px; min-height:100px; background:rgba(0,0,0,0.5); color:#fff; cursor:pointer; overflow:hidden; } .zd-imgChange-change{ cursor:pointer; color:#fff; margin:0px; padding:0px; position:relative; background:rgba(0,0,0,0.5); width:10%; height:100%; text-align:center; opacity:0.1; z-index:1; -moz-transition:opacity0.4s; -o-transition:opacity0.4s; -webkit-transition:opacity0.4s; transition:opacity0.4s; border:none; } .zd-imgChange-change:hover{ opacity:1; } .zd-imgChange-change-left{ float:left; } .zd-imgChange-change-right{ float:right; } .zd-imgChange-img{ z-index:0; padding:0px; position:absolute; top:0px; left:0px; background:rgba(100,0,0,0.1); width:100%; height:100%; } .zd-imgChange-img-item{ position:absolute; top:0px; left:0px; width:100%; height:100%; border:none; -moz-background-size:cover; -o-background-size:cover; background-size:cover; -moz-transition:opacity0.5s; -o-transition:opacity0.5s; -webkit-transition:opacity0.5s; transition:opacity0.5s; opacity:1; z-index:-1; } .zd-imgChange-img-item-temp{ z-index:0; } .zd-imgChange-img-item-sel{ z-index:1; } .zd-imgChange-controll{ z-index:2; padding:0px; position:absolute; bottom:0px; width:100%; height:20%; background:rgba(0,0,0,0); text-align:center; -moz-transition:background0.4s; -o-transition:background0.4s; -webkit-transition:background0.4s; transition:background0.4s; text-shadow:0px0px5px#000; opacity:0.7; } .zd-imgChange-controll:hover{ background:rgba(0,0,0,0.5); opacity:1; } .zd-imgChange-controllspan{ -moz-transition:color0.4s; -o-transition:color0.4s; -webkit-transition:color0.4s; transition:color0.4s; } .zd-imgChange-controllspan:hover{ color:rgba(0,0,0,0.6); }
HTML代码部分:
<!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metaname="viewport"content="width=device-width"> <title>图片切换</title> <scriptsrc="jquery-1.10.2.min.js"></script> <linkhref="zoeDylan.ImgChange.css"rel="stylesheet"/> <scriptsrc="zoeDylan.ImgChange.js"></script> <script> vara_imgs=newArray(//插入图片地址 './1(1).jpg', './1(2).jpg', './1(3).jpg', './1(4).jpg' ), a_links=newArray(//点击图片跳转的网址 'www.baidu.com', 'www.qq.com', 'www.google.com', 'www.zol.com' ), a_tips=newArray(//鼠标停靠的提示 '百度', '腾讯', '谷歌', '中关村' ); $(function(){ $('#imgc').zoeDylan_ImageChange({//设置 width:500, height:300, imgs:a_imgs, links:a_links, tips:a_tips, timers:2000 }); }); </script> </head> <body> <divid="imgc"> <!-- <spanclass="zd-imgChange-changezd-imgChange-change-left"><</span> <divclass="zd-imgChange-img"> <imgclass="zd-imgChange-img-item"src="http://subject.9ria.com/html5game/images/t1f.jpg"alt="图片加载错误!"title="提示"/> </div> <divclass="zd-imgChange-controll"><span>d</></div> <spanclass="zd-imgChange-changezd-imgChange-change-right">></span>--> </div> </body> </html>
ps:尽量使用高版本浏览器,目测测试浏览器:IE11IE10IE6google猎豹欧鹏可以完美运行,IE6透明效果有损失
代码下载:http://xiazai.jb51.net/201412/yuanma/zeodylanimgchange(jb51.net).rar