完美兼容各大浏览器的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 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
Javascript进制转换实例分析
May 14 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
JS中的BOM应用
2018/02/02 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
高中校园广播稿
2014/01/11 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
行政内勤岗位职责
2014/04/07 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
四年级评语大全
2014/04/21 职场文书
健康状况证明模板
2014/10/23 职场文书
失职检讨书大全
2015/01/26 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
小学教师教学反思
2016/02/24 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
Python代码实现双链表
2022/05/25 Python