完美兼容各大浏览器的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 "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 "codetitle">复制代码 代码如下:
.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="/UploadFiles/2021-04-02/jquery-1.10.2.min.js">     <link href="zoeDylan.ImgChange.css" rel="stylesheet" />
    <script src="/UploadFiles/2021-04-02/zoeDylan.ImgChange.js">     <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="/UploadFiles/2021-04-02/t1f.jpg">         </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