原生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 相关文章推荐
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
Bootstrap基础学习
Jun 16 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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
php中显示数组与对象的实现代码
2011/04/18 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
分享php邮件管理器源码
2016/01/06 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
python操作mysql代码总结
2018/06/01 Python
python中pip的安装与使用教程
2018/08/10 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
python实现静态服务器
2019/09/05 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
教师简历自我评价
2014/02/03 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
个人工作表现评价材料
2014/09/21 职场文书
民政局个人整改措施
2014/09/24 职场文书
学生党支部工作总结2015
2015/05/26 职场文书