完美兼容各大浏览器的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