이미지 전환 효과를 달성하기 위해 주요 브라우저의 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) < 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 = '<';
        _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 < _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('' _icon[1] '');
            //提示
            $(_eleImg.children('img')[i]).attr({ 'title': _setting.tips[i] '|' _setting.links[i] });
            $(_eleControll.children('span')[i]).attr('title', _setting.tips[i]);
        }
        Dispose(0, 'TtoB');
    }
    //处理尺寸
    함수 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' });
    }
    //处理操事件
    함수 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');
                        } 그 밖의 {
                            Dispose(i - 1, 'RtoL');
                        }
                        휴식;
                    }
                }
            } 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');
                        } 그 밖의 {
                            폐기(i 1, 'LtoR');
                        }
                        휴식;
                    }
                }
            } 그 밖의 {
                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');
                    }
                    휴식;
                }
            }
        });
    }
    //切换器
    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('제목') : $(_eleControll.children('span')[0]).attr('제목'));
        _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('왼쪽', _setting.width);
                _eleTemp.animate({ 왼쪽: 0 }, 300);
            } else if (dir == 'LtoR') {
                _eleTemp.css('왼쪽', -_setting.width);
                _eleTemp.animate({ 왼쪽: 0 }, 300);
            }
        }
    }
    //自动切换时钟
    함수 타이머() {
        _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');
                } 그 밖의 {
                    Dispose(i - 1, 'TtoB');
                }
                휴식;
            }
        }
    }
})($)

CSS代码부분:

复主代码 代码如下:

.zd-imgChange {
    위치: 상대;
    여백: 자동;
    패딩: 0px;
    최소 너비: 200px;
    최소 높이: 100px;
    배경: rgba(0,0,0,0.5);
    색상: #fff;
    커서: 포인터;
    오버플로: 숨김;
}
.zd-imgChange-변경 {
    커서:포인터;
    색상:#fff;
    여백: 0px;
    패딩: 0px;
    위치: 상대;
    배경: rgba(0,0,0,0.5);
    너비: 10%;
    높이: 100%;
    텍스트 정렬: 중앙;
    불투명도: 0.1;
    Z-색인: 1;
    -moz-전환: 불투명도 0.4초;
    -o-전환: 불투명도 0.4초;
    -webkit-transition: 불투명도 0.4초;
    전환: 불투명도 0.4초;
    테두리:없음;
}
    .zd-imgChange-change:hover {
        불투명도: 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-전환: 불투명도 0.5초;
    -o-전환: 불투명도 0.5초;
    -webkit-transition: 불투명도 0.5초;
    전환: 불투명도 0.5초;
    불투명도: 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-전환: 배경 0.4초;
    -o-전환: 배경 0.4초;
    -webkit-transition: 배경 0.4초;
    전환: 배경 0.4초;
    텍스트 그림자: 0px 0px 5px #000;
    불투명도: 0.7;
}
    .zd-imgChange-controll:hover {
        배경: rgba(0,0,0,0.5);
        불투명도: 1;
    }
    .zd-imgChange-controll 범위 {
        -moz-전환: 색상 0.4초;
        -o-전환: 색상 0.4초;
        -webkit-transition: 색상 0.4초;
        전환: 색상 0.4초;
    }
        .zd-imgChange-controll 범위:호버 {
            색상: rgba(0,0,0,0.6);
        }

HTML代码부분분:

复主代码 代码如下:

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







            var a_imgs = new Array(//이미지 주소 삽입
'./1 (1).jpg',
'./1 (2).jpg',
'./1 (3).jpg',
'./1 (4).jpg'
),
A_links = New Array (//사진 점프 URL을 클릭하세요
                  'www.baidu.com',
                 'www.qq.com',
                 'www.google.com',
                 'www.zol.com'
),
                a_tips = new Array(//마우스 도킹 팁
'바이두',
'텐센트',
'구글',
                '중관촌'
);
               $(함수 () {
                $('#imgc').zoeDylan_ImageChange({//설정
                     너비: 500,
키: 300,
imgs: a_imgs,
              링크: a_links,
팁: a_tips,
              타이머:2000
            });
              })