快捷導(dǎo)航

完美兼容各大瀏覽器的jQuery插件實(shí)現(xiàn)圖片切換特效

更新時(shí)間：2014年12月12日 11:25:55 投稿：hebedich

網(wǎng)友zoeDylan寫的原創(chuàng)jquery插件，實(shí)現(xiàn)了圖片輪播功能，jquery插件名稱為zoeDylan.ImgChange，圖片路徑、跳轉(zhuǎn)鏈接、提示標(biāo)題都是有動(dòng)態(tài)數(shù)組來配置，jquery插件可靈活配置6個(gè)參數(shù)， height高、width寬、mgs圖片地址、links點(diǎn)擊地址、tips圖片說明、timers自動(dòng)切換時(shí)間，

文件里面的功能注釋也寫得非常詳細(xì)(詳見zoeDylan.ImgChange-1.0.1.js文件)，對網(wǎng)友們的學(xué)習(xí)是很有幫助的，雖然樣式不太好看，大家可以自己寫，好好利用哦。。。

JS代碼部分：

復(fù)制代碼代碼如下:

(function ($) {

    var//申明全局變量

        _eleTemp,//緩存變量

        _eleThis = $(this),//當(dāng)前元素

        _eleImg = $('.zd-imgChange-img'),//圖片組元素

        _eleControll = $('.zd-imgChange-controll'),//控制器組元素

        _eleChange = $('.zd-imgChange-change'),//切換元素

            _icon = '●○',//動(dòng)態(tài)圖標(biāo)

            _imgTemplate = $(document.createElement('img')),//圖片模版'

            _setting = {

                height: 100,//高

                width: 200,//寬

                imgs: new Array(),//圖片地址

                links: null,//點(diǎn)擊地址

                tips: null,//圖片說明

                timers: 3000//自動(dòng)切換時(shí)間

            },//配置

            _timers = null//自動(dòng)切換保存變量

    $.fn.zoeDylan_ImageChange = function (op) {

        _eleThis = $(this);

        _setting = $.extend(_setting, op);//設(shè)置屬性

        //處理數(shù)據(jù)(查看是否為合法范圍)

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

            //圖標(biāo)

            _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 () {//點(diǎn)擊圖片跳轉(zhuǎn)

            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')) {//判斷是否點(diǎn)擊的同一個(gè)標(biāo)簽

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

        //切換動(dòng)畫--根據(jù)z-index實(shí)現(xiàn)視覺效果

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

            }

        }

    }

    //自動(dòng)切換時(shí)鐘

    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代碼部分：

復(fù)制代碼代碼如下:

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

        }