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

　　(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: new Array(),//图片地址

　　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);

　　return this.each(function () {//初始化

　　AddTemplate();

　　AddImg();

　　DisSize();

　　DisControll();

　　})

　　}

　　//添加模版

　　function AddTemplate() {

　　_eleThis.removeClass();

　　_eleThis.addClass('zd-imgChange');

　　_eleTemp = '<button class="zd-imgChange-change zd-imgChange-change-left"><</button>';

　　_eleThis.append(_eleTemp);

　　_eleTemp = '     <div class="zd-imgChange-img">   </div>';

　　_eleThis.append(_eleTemp);

　　_eleTemp = '       <div class="zd-imgChange-controll"></div>';

　　_eleThis.append(_eleTemp);

　　_eleTemp = ' <button class="zd-imgChange-change zd-imgChange-change-right">></button>';

　　_eleThis.append(_eleTemp);

　　//给全局变量赋值

　　_eleImg = $('.zd-imgChange-img');

　　_eleControll = $('.zd-imgChange-controll');

　　_eleChange = $('.zd-imgChange-change');

　　}

　　//添加图片

　　function AddImg() {

　　for (var i = 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');

　　}

　　//处理尺寸

　　function DisSize() {

　　_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' });

　　}

　　//处理操作事件

　　function DisControll() {

　　_eleImg.children('img').bind('click', function () {//点击图片跳转

　　document.location = 'http://' + $(this).attr('title').split('|')[$(this).attr('title').split('|').length - 1];

　　});

　　_eleChange.bind('click', function () {//顺序切换图片

　　var nowImg = $('.zd-imgChange-img-item-sel');

　　_eleTemp = _eleImg.children('img');

　　if ($(this).hasClass('zd-imgChange-change-left')) {//向左切换

　　for (var i = 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;

　　}

　　}

　　} else if ($(this).hasClass('zd-imgChange-change-right')) {//向右切换

　　for (var i = 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 {

　　return false;

　　}

　　});

　　_eleControll.children('span').bind('click', function () {

　　for (var i = 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;

　　}

　　}

　　});

　　}

　　//切换器

　　function Dispose(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实现视觉效果

　　function DisposeAnm() {

　　$('.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);

　　} else if (dir == 'RtoL') {

　　_eleTemp.css('left', _setting.width);

　　_eleTemp.animate({ left: 0 }, 300);

　　} else if (dir == 'LtoR') {

　　_eleTemp.css('left', -_setting.width);

　　_eleTemp.animate({ left: 0 }, 300);

　　}

　　}

　　}

　　//自动切换时钟

　　function Timers() {

　　_timers = setTimeout(Timers, _setting.timers);

　　var nowImg = $('.zd-imgChange-img-item-sel');

　　_eleTemp = _eleImg.children('img');

　　for (var i = 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;

　　}

　　}

　　}

　　})($)

　　.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);

　　}

　　<!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">

　　<!--        <span class="zd-imgChange-change zd-imgChange-change-left"><</span>

　　<div class="zd-imgChange-img">

　　<img class="zd-imgChange-img-item" src="http://subject.9ria.com/html5game/images/t1f.jpg" alt="图片加载错误!" title="提示" />

　　</div>

　　<div class="zd-imgChange-controll"><span>d</></div>

　　<span class="zd-imgChange-change zd-imgChange-change-right">></span>-->

　　</div>

　　</body>

　　</html>