完美兼容各大浏览器的jQuery插件实现图片切换特效-工具盒子

文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件)，对网友们的学习是很有帮助的，虽然样式不太好看，大家可以自己写，好好利用哦。。。

JS代码部分：

++复制代码++ 代码如下:

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: opacity 0.4s;
-o-transition: opacity 0.4s;
-webkit-transition: opacity 0.4s;
transition: opacity 0.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: opacity 0.5s;
-o-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
transition: opacity 0.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: background 0.4s;
-o-transition: background 0.4s;
-webkit-transition: background 0.4s;
transition: background 0.4s;
text-shadow: 0px 0px 5px #000;
opacity: 0.7;
}
.zd-imgChange-controll:hover {
background: rgba(0,0,0,0.5);
opacity: 1;
}
.zd-imgChange-controll span {
-moz-transition: color 0.4s;
-o-transition: color 0.4s;
-webkit-transition: color 0.4s;
transition: color 0.4s;
}
.zd-imgChange-controll span:hover {
color: rgba(0,0,0,0.6);
}

HTML代码部分：

++复制代码++ 代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width">
<title>图片切换</title>
<script src="jquery-1.10.2.min.js"></script>
<link href="zoeDylan.ImgChange.css" rel="stylesheet" />
<script src="zoeDylan.ImgChange.js"></script>
<script>
var a_imgs = new Array(//插入图片地址
'./1 (1).jpg',
'./1 (2).jpg',
'./1 (3).jpg',
'./1 (4).jpg'
),
a_links = new Array(//点击图片跳转的网址
'www.baidu.com',
'www.qq.com',
'www.google.com',
'www.zol.com'
),
a_tips = new Array(//鼠标停靠的提示
'百度',
'腾讯',
'谷歌',
'中关村'
);
$(function () {
$('#imgc').zoeDylan_ImageChange({//设置
width: 500,
height: 300,
imgs: a_imgs,
links: a_links,
tips: a_tips,
timers:2000
});
});
</script>
</head>
<body>
<div id="imgc">

</div>
</body>
</html>