zoukankan      html  css  js  c++  java
  • 原生javascript-图片按钮切换

    原生javascript-图片按钮切换

    即上次被分配写原生JS相册弹窗后,这次又接到了写原生JS,图片按钮切换,真激情:

    个人在线实例:http://www.lgyweb.com/picSwitch/

    以下为详细代码:

    复制代码
    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);
        },
        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(){
                if(_that.nIndex != 0 ) {
                    _that.nIndex--;
                    _that.picChange();
                    _that.btnIsShow();
                }
            }
        },
        btnNext:function(){
            var _that = this;
            this.oBtnNext.onclick = function(){
                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结构必需是以下:外层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
  • 相关阅读:
    django页面分类和继承
    django前端从数据库获取请求参数
    pycharm配置django工程
    django 应用各个py文件代码
    CF. 1428G2. Lucky Numbers(背包DP 二进制优化 贪心)
    HDU. 6566. The Hanged Man(树形背包DP DFS序 重链剖分)
    小米邀请赛 决赛. B. Rikka with Maximum Segment Sum(分治 决策单调性)
    区间树 学习笔记
    CF GYM. 102861M. Machine Gun(主席树)
    2016-2017 ACM-ICPC East Central North America Regional Contest (ECNA 2016) (B, D, G, H)
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3185169.html
Copyright © 2011-2022 走看看