完美兼容各大浏览器的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 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
javascript实现文字跑马灯效果
Jun 18 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php学习之运算符相关概念
2011/06/09 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
python异常和文件处理机制详解
2016/07/19 Python
python3中str(字符串)的使用教程
2017/03/23 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
生物制药毕业生自荐信
2013/10/16 职场文书
社区学习十八大感想
2014/01/22 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
六一儿童节主持词
2014/03/21 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
保研推荐信
2014/05/09 职场文书
法制宣传标语集锦
2014/06/25 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
运动会通讯稿100字
2015/07/20 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android