原生javascript实现图片按钮切换


Posted in Javascript onJanuary 12, 2015

先给大家看下效果展示图

原生javascript实现图片按钮切换

以下为详细代码:

function LGY_picSwitch(option){

    this.oWrap = this.getId(option.wrapID); //最外层元素

    this.olistWrap = this.getNodeByClassname(this.oWrap,'gy_picSwitch_listWrap')[0];

    this.oUl = this.olistWrap.getElementsByTagName('ul')[0];

    this.oBtnPrev = this.getNodeByClassname(this.oWrap,'gy_picSwitch_prev')[0];

    this.oBtnNext = this.getNodeByClassname(this.oWrap,'gy_picSwitch_next')[0];

    this.nLen = this.oUl.getElementsByTagName('li').length; //图片总数

    this.nScollCount = option.scrollCount; //每次滚动的数量

    this.nScollLen = Math.ceil(this.nLen/option.scrollCount); // 切换判断的最大值

    this.nSwitchWidth = 0; //每次切换移动的距离,在代码里面动态获取值

    this.nIndex = 0; //切换图片的当前索引

    this.timer = null; //切换图片的引值

    this.int();

}

LGY_picSwitch.prototype = {

    getId:function(id){

        return document.getElementById(id);

    },

    getNodeByClassname:function(parent,classname){

        var classElements = new Array();

        var els = parent.getElementsByTagName('*');

        var elsLen = els.length;

        var pattern = new RegExp("(^|\\s)"+classname+"(\\s|$)");

        for (i = 0, j = 0; i < elsLen; i++) {

                if ( pattern.test(els[i].className) ) {

                        classElements[j] = els[i];

                        j++;

                }

        }

        return classElements;

    },

    getCss:function(node,value)

    {

        return node.currentStyle?node.currentStyle[value]:getComputedStyle(node,null)[value];

    },

    setCss:function(node,val){

        for(var v in val){

            node.style.cssText += ';'+ v +':'+val[v];

        }

    },

    moveFn:function(node,value,targetValue,callback){

        var _that = this;

        clearInterval(this.timer);

        this.timer = setInterval(function()

        {

            var val = parseFloat(_that.getCss(node,value));

            var speed = ( targetValue- val )/8;

            speed = speed>0?Math.ceil(speed):Math.floor(speed);

            if(speed ==0)

            {

                clearInterval(_that.timer);

                callback&&callback();

            }

            else

            {                    

                node.style[value] = ( val + speed ) +'px';                    

            }

            

        },20);

    },

    picChange:function(){

        this.moveFn(this.oUl,'marginLeft',-this.nIndex*this.nSwitchWidth);

    },

    cancelBubble:function(e){

        e.stopPropagation?e.stopPropagation():e.cancelBubble = true;

    },

    btnIsShow:function(){

        this.setCss(this.oBtnNext,{'display':'block'});

        this.setCss(this.oBtnPrev,{'display':'block'});

        if( this.nIndex == 0 ) this.setCss(this.oBtnPrev,{'display':'none'});

        if( this.nIndex ==(this.nScollLen-1) ) this.setCss(this.oBtnNext,{'display':'none'});

    },

    btnPrev:function(){

        var _that = this;

        this.oBtnPrev.onclick = function(e){

            var e = e || window.event;

            _that.cancelBubble(e);

            if(_that.nIndex != 0 ) {

                _that.nIndex--;

                _that.picChange();

                _that.btnIsShow();

            }

        }

    },

    btnNext:function(){

        var _that = this;

        this.oBtnNext.onclick = function(e){

            var e = e || window.event;

            _that.cancelBubble(e);

            if(_that.nIndex != (_that.nScollLen-1) ) {

                _that.nIndex++;

                _that.picChange();

                _that.btnIsShow();

            }

        }

    },

    int:function(){

        //动态获取移动的宽度

        var oLi = this.oUl.getElementsByTagName('li')[0],

            oLi_w = oLi.offsetWidth + parseInt(this.getCss(oLi,'marginLeft')) + parseInt(this.getCss(oLi,'marginRight'));

        this.nSwitchWidth = oLi_w*this.nScollCount;

        //按钮显示初始化

        this.btnIsShow();

        //左右切换

        this.btnPrev();

        this.btnNext();

    }

}

 
 HTML代码:
/*

* HTML结构必需是以下:外层ID名,自己传入 如下面的:id="gy_picSwitch02" ,ID名,自己随便给

但,里面的结构必需一样,包括类名classname

<div id="gy_picSwitch02">

    <span class="gy_picSwitch_prev"></span>

    <span class="gy_picSwitch_next"></span>

    <div class="gy_picSwitch_listWrap">

        <ul>

            <li><img src="images/pic01.jpg" alt=""></li>

            <li><img src="images/pic02.jpg" alt=""></li>

            <li><img src="images/pic03.jpg" alt=""></li>

            <li><img src="images/pic04.jpg" alt=""></li>

            <li><img src="images/pic05.jpg" alt=""></li>

            <li><img src="images/pic06.jpg" alt=""></li>

            <li><img src="images/pic07.jpg" alt=""></li>

            <li><img src="images/pic08.jpg" alt=""></li>

        </ul>

    </div>

</div>

参数:'wrapID':'xxxx',最外层的ID名
      'scrollCount':5,滚动的数量  

   

*

*/

//实例化

 new LGY_picSwitch({'wrapID':'gy_picSwitch','scrollCount':5});

是不是很方便的功能呢,使用也很简单,这里推荐给小伙伴,希望对大家能有所帮助

Javascript 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 #Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 #Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 #Javascript
推荐4个原生javascript常用的函数
Jan 12 #Javascript
原生js实现日期联动
Jan 12 #Javascript
Javascript中innerHTML用法实例分析
Jan 12 #Javascript
js实现从数组里随机获取元素
Jan 12 #Javascript
You might like
PHP7 新特性详细介绍
2016/09/06 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
jQuery操作cookie
2016/08/08 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
Python的Django框架安装全攻略
2015/07/15 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
Python排序函数的使用方法详解
2020/12/11 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
半年思想汇报
2013/12/30 职场文书
采购部部长岗位职责
2014/02/06 职场文书
银行简历自我评价
2014/02/11 职场文书
聚美优品广告词改编
2014/03/14 职场文书
优秀员工推荐信
2014/05/10 职场文书
文明班集体申报材料
2014/05/23 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
医院领导班子整改方案
2014/10/01 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL