完美兼容各大浏览器的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: 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;
            }
        }
    }
}）（$）

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

ps:尽量使用高版本浏览器，目测测试浏览器：IE11 IE10 IE6 google 猎豹欧鹏可以完美运行，IE6透明效果有损失
代码下载：http://xiazai.jb51.net/201412/yuanma/zeodylanimgchange（jb51.net）.rar