完美兼容各大浏览器的jQuery插件实现图片切换特效


Posted in Javascript onDecember 12, 2014

文件里面的功能注释也写得非常详细(详见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 = '<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);

            //图标

            _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 ? $(_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);

        //切换动画--根据z-index实现视觉效果

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

            }

        }

    }

    //自动切换时钟

    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代码部分:

.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="jquery-1.10.2.min.js"></script>

    <link href="zoeDylan.ImgChange.css" rel="stylesheet" />

    <script src="zoeDylan.ImgChange.js"></script>

    <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="http://subject.9ria.com/html5game/images/t1f.jpg" alt="图片加载错误!" title="提示" />

        </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.3water.com/201412/yuanma/zeodylanimgchange(3water.com).rar

Javascript 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 #Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 #Javascript
js使用递归解析xml
Dec 12 #Javascript
做web开发 先学JavaScript
Dec 12 #Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 #Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 #Javascript
javascript中HTMLDOM操作详解
Dec 11 #Javascript
You might like
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
js类 from qq
2006/11/13 Javascript
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
使用python 3实现发送邮件功能
2018/06/15 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
GWebs公司笔试题
2012/05/04 面试题
父亲的菜园教学反思
2014/02/13 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
微笑服务标语
2014/06/24 职场文书
测量员岗位职责
2015/02/14 职场文书
病房管理制度范本
2015/08/06 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书