Parfaitement compatible avec les plug-ins jQuery pour les principaux navigateurs afin d'obtenir des effets de changement d'image_jquery

Les commentaires de fonction dans le fichier sont également écrits de manière très détaillée (voir le fichier zoeDylan.ImgChange-1.0.1.js pour plus de détails), ce qui est très utile pour les internautes, même si le style n'est pas très beau. , vous pouvez l'écrire vous-même. . .

Partie du code JS :

Copier le code Le code est le suivant :

(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');
    >
    //添加图片
    fonction AddImg() {
        pour (var i = 0; i < _setting.imgs.length; i ) {
            //图Photo
            _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');
    >
    //处理尺寸
    fonction 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' });
    >
    //处理操作事件
    fonction 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')) {//向左切换
                pour (var i = 0; i < _eleTemp.length; i ) {
                    if (nowImg.attr('title') == $(_eleTemp[i]).attr('title')) {
                        si ((i - 1) < 0) {
                            Dispose(_eleTemp.length - 1, 'RtoL');
                        } autre {
                            Dispose(i - 1, 'RtoL');
                        >
                        pause;
                    >
                >
            } else if ($(this).hasClass('zd-imgChange-change-right')) {//向右切换
                pour (var i = 0; i < _eleTemp.length; i ) {
                    if (nowImg.attr('title') == $(_eleTemp[i]).attr('title')) {
                        if ((i 1) > _eleTemp.length - 1) {
                            Dispose(0, 'LtoR');
                        } autre {
                            Dispose(i 1, 'LtoR');
                        >
                        pause;
                    >
                >
            } autre {
                retourner faux ;
            >
        });
        _eleControll.children('span').bind('click', function () {
            pour (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');
                    >
                    pause;
                >
            >
        });
    >
    //切换器
    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('titre') : $(_eleControll.children('span')(0]).attr('titre'));
        _timers = setTimeout(Timers, _setting.timers);
        //切换动画--根据z-index实现视觉效果
        fonction 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);
            } sinon if (dir == 'RtoL') {
                _eleTemp.css('left', _setting.width);
                _eleTemp.animate({ gauche : 0 }, 300);
            } sinon if (dir == 'LtoR') {
                _eleTemp.css('left', -_setting.width);
                _eleTemp.animate({ gauche : 0 }, 300);
            >
        >
    >
    //自动切换时钟
    fonction Minuteries() {
        _timers = setTimeout(Timers, _setting.timers);
        var nowImg = $('.zd-imgChange-img-item-sel');
        _eleTemp = _eleImg.children('img');
        pour (var i = 0; i < _eleTemp.length; i ) {
            if (nowImg.attr('title') == $(_eleTemp[i]).attr('title')) {
                si ((i - 1) < 0) {
                    Dispose(_eleTemp.length - 1, 'TtoB');
                } autre {
                    Dispose(i - 1, 'TtoB');
                >
                pause;
            >
        >
    >
})($)

CSS代码部分：

复制代码 代码如下 :

.zd-imgChange {
    position : relative ;
    marge : auto;
    remplissage : 0px ;
    largeur minimale : 200 px ;
    hauteur min : 100 px ;
    arrière-plan : rgba(0,0,0,0.5);
    couleur : #fff;
    curseur : pointeur ;
    débordement : caché ;
>
.zd-imgChange-change {
    curseur:pointeur;
    couleur :#fff;
    marge : 0px;
    remplissage : 0px ;
    position : relative ;
    arrière-plan : rgba(0,0,0,0.5);
    largeur : 10%;
    hauteur : 100%;
    text-align: center;
    opacité : 0,1 ;
    indice z : 1 ;
    -moz-transition : opacité 0,4s ;
    -o-transition : opacité 0,4s ;
    -webkit-transition : opacité 0,4s ;
    transition : opacité 0,4s ;
    bordure : aucune ;
>
    .zd-imgChange-change: survol {
        opacité : 1 ;
    >
.zd-imgChange-change-left {
    flotter : gauche ;
>
.zd-imgChange-change-right {
    flotter : à droite ;
>
.zd-imgChange-img {
    indice z : 0 ;
    remplissage : 0px ;
    position : absolue ;
    haut : 0px;
    gauche : 0px;
    arrière-plan : rgba(100,0,0,0.1);
    largeur : 100 % ;
    hauteur : 100%;
>
.zd-imgChange-img-item {
    position : absolue ;
    haut : 0px;
    gauche : 0px;
    largeur : 100 % ;
    hauteur : 100%;
    bordure : aucune ;
    -moz-background-size : couverture ;
    -o-background-size : couverture ;
    taille du fond : couverture ;
    -moz-transition : opacité 0,5s ;
    -o-transition : opacité 0,5s ;
    -webkit-transition : opacité 0,5s ;
    transition : opacité 0,5s ;
    opacité : 1 ;
    indice z : -1 ;
>
.zd-imgChange-img-item-temp{
    indice z:0;
>
.zd-imgChange-img-item-sel {
    indice z : 1 ;
>
.zd-imgChange-controll {
    indice z : 2 ;
    remplissage : 0px ;
    position : absolue ;
    en bas : 0px ;
    largeur : 100 % ;
    hauteur : 20%;
    arrière-plan : rgba(0,0,0,0);
    text-align: center;
    -moz-transition : arrière-plan 0,4 s ;
    -o-transition : arrière-plan 0,4 s ;
    -webkit-transition : arrière-plan 0,4s ;
    transition : arrière-plan 0,4 s ;
    texte-ombre : 0px 0px 5px #000;
    opacité : 0,7 ;
>
    .zd-imgChange-controll:hover {
        arrière-plan : rgba(0,0,0,0.5);
        opacité : 1 ;
    >
    .zd-imgChange-control span {
        -moz-transition : couleur 0,4s ;
        -o-transition : couleur 0,4s ;
        -webkit-transition : couleur 0,4s ;
        transition : couleur 0,4s ;
    >
        .zd-imgChange-controll span:hover {
            couleur : rgba(0,0,0,0.6);
        >

HTML代码部分：

复制代码 代码如下 :

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






<script><br>             var a_imgs = new Array(//Insérer l'adresse de l'image<br> ‘./1 (1).jpg’,<br> ‘./1 (2).jpg’,<br> ‘./1 (3).jpg’,<br> ‘./1 (4).jpg’<br> ),<br> A_links = New Array (// Cliquez sur l'URL du saut d'image <br>                   'www.baidu.com',<br>                  'www.qq.com',<br>                  'www.google.com',<br>                  'www.zol.com'<br> ),<br>                 a_tips = new Array(//Conseils pour l'ancrage de la souris<br> «Baidu»,<br> « Tencent »,<br> "Google",<br>                 'Zhongguancun'<br> );<br>                $(function () {<br>                 $('#imgc').zoeDylan_ImageChange({//Paramètres<br>                      largeur : 500,<br> Hauteur : 300,<br> imgs : a_imgs,<br>               liens : a_links,<br> Conseils : a_tips,<br>               minuteries : 2000<br>             });<br>               } ); <br> </script>

ps : essayez d'utiliser une version supérieure du navigateur, test visuel du navigateur : IE11 IE10 IE6 Google Cheetah Oupeng peut fonctionner parfaitement, l'effet de transparence IE6 est perdu

Téléchargement du code : http://xiazai.jb51.net/201412/yuanma/zeodylanimgchange(jb51.net).rar