完美相容各大瀏覽器的jQuery外掛實現圖片切換特效_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)         _setting.width = parseFloat(_setting.width)         return this.each(function () {//初始化
            AddTemplate();
            AddImg();
            DisSize();
            DisControll();
        })
    }
    //添加模版
    function AddTemplate() {
        _eleThis.removeClass();
        _eleThis.addClass('zd-imgChange');
        _eleTemp = '';
        _eleThis.append(_eleTemp);
        _eleTemp = '    

  

';
        _eleThis.append(_eleTemp);
        _eleTemp = '      

';
        _eleThis.append(_eleTemp);
        _eleTemp = ' >>';
        _eleThis.append(_eleTemp);
        // 將全域變數賦值
        _eleImg = $('.zd-imgChange-img');
        _eleControll = $('.zd-imgChange-controll');
        _eleChange = $('.zd-imgChange-change');
    }
    //新增圖片
    函數 AddImg() {
        for (var i = 0; i             //圖片
            _eleTemp = $(document.createElement('img'));
            _eleTemp.addClass('zd-imgChange-img-item');
            _eleTemp.attr('src', _setting.imgs[i]);
            _eleImg.append(_eleTemp);
            // 圖示
            _eleControll.append('' _icon[1] '');
            // 提示
            $(_eleImg.children('img')[i]).attr({ 'title': _setting.tips[i] '|' _setting.links[i] });
            $(_eleControll.children('span')[i]).attr('title', _setting.tips[i]);
        }
        付出(0, 'TtoB');
    }
    //處理尺寸
    函數 DisSize() {
        _eleThis.css({ 'height': _setting.height, 'width': _setting.width, 'font-size': _setting.height * 0.2 - 2 });
        _eleThis.children('button').css('字體大小', _setting.height * 0.2 - 2);
        _eleChange.css({ 'line-height': _setting.height 'px' });
    }
    //處理操作事件
    函數 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                     if (nowImg.attr('title') == $(_eleTemp[i]).attr('title')) {
                        if ((i - 1)                             Dispose(_eleTemp.length - 1, 'RtoL');
                        }其他{
                            付出(i - 1, 'RtoL');
                        }
                        休息；
                    }
                }
            } else if ($(this).hasClass('zd-imgChange-change-right')) {// 向右切換
                for (var i = 0; i                     if (nowImg.attr('title') == $(_eleTemp[i]).attr('title')) {
                        if ((i 1) > _eleTemp.length - 1) {
                           處置(0, '由左至右');
                        } 其他 {
                           處置(i 1, 'LtoR');
                        }
                        休息；
                    }
                }
            } 其他 {
                回復錯誤；
            }
        });
        _eleControll.children('span').bind('點選', function () {
            for (var i = 0; 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')) {/ /判斷是否點擊同一個標籤
                       處置(i, 'TtoB');
                    }
                    休息；
                }
            }
        });
    }
    // 切換器
    function Dispose(eNum, dir) {//切換圖片
        清除逾時(_timers);
        DisposeAnm();
        $(_eleControll.children('span')).html(_icon[1]);
        $(_eleControll.children('span')[eNum]).html(_icon[0]);
$('.zd-imgChange-change-left').attr('標題', eNum - 1 >= 0 ? $(_eleControll.children('span')[eNum - 1]).attr('標題' ) : $(_eleControll.children('span')[_eleControll.children('span').length - 1]).attr('title'));
$('.zd-imgChange-change-right').attr('標題', eNum 1         _timers = setTimeout(Timers, _setting.timers);
        // 切換動畫--根據z-index達到視覺效果
        函數 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);
            }
        }
    }
    //自動切換時鐘
    函數計時器() {
        _timers = setTimeout(Timers, _setting.timers);
        var nowImg = $('.zd-imgChange-img-item-sel');
        _eleTemp = _eleImg.children('img');
        for (var i = 0; i             if (nowImg.attr('title') == $(_eleTemp[i]).attr('title')) {
                if ((i - 1)                     Dispose(_eleTemp.length - 1, 'TtoB');
                }其他{
                    付出(i - 1, 'TtoB');
                }
                休息；
            }
        }
    }
})($)

CSS代碼部分：

複製程式碼程式碼如下：

.zd-imgChange {
    位置：相對；
    邊距：自動；
    內邊距：0px；
    最小寬度：200px；
    最小高度：100px；
    背景：rgba(0,0,0,0.5);
    顏色：#fff；
    遊標：指針；
    溢位：隱藏；
}
.zd-imgChange-change {
    遊標：指針；
    顏色：#fff;
    邊距：0px；
    內邊距：0px；
    位置：相對；
    背景：rgba(0,0,0,0.5);
    寬度：10%；
    高度：100%；
    文字對齊：居中；
    不透明度：0.1；
    z 索引：1；
    -moz-transition: 不透明度 0.4s;
    -o-transition: 不透明度 0.4s;
    -webkit-transition: 不透明度 0.4s;
    過渡：不透明度 0.4s；
    邊框：無；
}
    .zd-imgChange-change:懸停 {
        不透明度：1；
    }
.zd-imgChange-change-left {
    浮動：左；
}
.zd-imgChange-change-right {
    浮動：右；
}
.zd-imgChange-img {
    z 索引：0；
    內邊距：0px；
    位置：絕對；
    上方：0px;
    左：0px；
    背景：rgba(100,0,0,0.1);
    寬度：100%；
    高度：100%；
}
.zd-imgChange-img-item {
    位置：絕對；
    上方：0px;
    左：0px；
    寬度：100%；
    高度：100%；
    邊框：無；
    -moz-背景大小：封面；
    -o-背景大小：覆蓋；
    背景大小：封面；
    -moz-transition: 不透明度 0.5s;
    -o-transition: 不透明度 0.5s;
    -webkit-transition: 不透明度 0.5s;
    過渡：不透明度 0.5s；
    不透明度：1；
    z 索引：-1；
}
.zd-imgChange-img-item-temp{
    z 索引:0;
}
.zd-imgChange-img-item-sel {
    z 索引：1；
}
.zd-imgChange-controll {
    z 索引：2；
    內邊距：0px；
    位置：絕對；
    底部：0px;
    寬度：100%；
    高度：20%；
    背景：rgba(0,0,0,0);
    文字對齊：居中；
    -moz-transition：背景0.4s；
    -o-transition：背景0.4s；
    -webkit-transition: 背景 0.4s;
    過渡：背景0.4s；
    文字陰影：0px 0px 5px #000;
    不透明度：0.7；
}
    .zd-imgChange-controll:停留 {
        背景：rgba(0,0,0,0.5);
        不透明度：1；
    }
    .zd-imgChange-controll 跨度 {
        -moz-transition：顏色0.4s；
        -o-transition: 顏色 0.4s;
        -webkit-transition: 顏色 0.4s;
        過渡：色彩 0.4s；
    }
        .zd-imgChange-controll span:hover {
            顏色：rgba(0,0,0,0.6);
        }

HTML程式碼部分：

複製程式碼程式碼如下：

http://www.w3.org/1999/xhtml">

   
   
   
   
   
    <script><br />             var a_imgs = new Array(//插入圖片地址<br />                 './1 (1).jpg',<br />                 './1 (2).jpg',<br />                 './1 (3).jpg',<br />                 './1 (4).jpg'<br />                 ),<br />                 a_links = new Array(//點選圖片跳轉的網址<br />                 'www.baidu.com',<br />                 'www.qq.com',<br />                 'www.google.com',<br />                 'www.zol.com'<br />                 ),<br />                 a_tips = new Array(//滑鼠停靠的提示<br />                 '百度',<br />                 '以呼叫方式』,<br />                 'Google',<br />                 '中關村之』<br />                 );<br />             $(function () {<br />             $('#imgc').zoeDylan_ImageChange({//設定<br />                 width: 500,<br />                 height: 300,<br />                 imgs: a_imgs,<br />                 links: a_links,<br />                 tips: a_tips,<br />                 timers:2000<br />             });<br />             }); <br />     </script>


   

   

ps:盡量使用高版本瀏覽器，目測測試瀏覽器：IE11 IE10 IE6 google 獵豹 歐鵬 可以完美運行，IE6透明效果有損失

代碼下載：http://xiazai.jb51.net/201412/yuanma/zeodylanimgchange(jb51.net).rar