标签页左右移动

HTML代码

<div class="nav-title">
        	<div class="nav-move" onclick="moveLeft();">
        		<img src="../img/left.png"/>
        	</div>
        	<ul class="button-lclb">
        		<li>
        			<button type="button" id="btn-index" class="btn btn-default btn-group-lclb " aria-label="Left Align">
						<p>首页</p>
					</button>
        		</li>
        		
        	</ul>
        	<div class="nav-move nav-move-right" onclick="moveRight();">
        		<img src="../img/right.png"/>
        	</div>

		</div>

js代码

//导航栏左移
var btn_width = 120;
function moveLeft(){
	var lbWidth = $('.button-lclb').width();
	var moveNum = Math.floor(lbWidth/btn_width);//移动的个数
	var li_length = $('.button-lclb li').length;
	//根据显示的个数和需要移动的个数判断需不需要左移
	if(moveNum<li_length){
		//通过获取left的值判断有没有左移过
		var leftPX = $('.button-lclb').css("left");
		var leftPXNum = leftPX.substring(0,leftPX.length-2);
		if(leftPXNum<0){
			//如果已经进行移动过之后首先计算li的总长度，除以标签行的宽度判断最最多左移几次
			var sumLength = Math.ceil(li_length*btn_width);//ul的总长度
			var numOfTimes =  Math.ceil(sumLength/lbWidth)-1;//能够移动的次数
			//计算已经移动的次数
			var moveUlNum = Math.ceil(Math.abs(leftPXNum)/lbWidth);
			//如果已经移动的次数小于能够移动的次数便移动
			if(moveUlNum<numOfTimes){
				var moveWidth = (moveUlNum+1)*moveNum*btn_width;
				$('.button-lclb').attr('style','left:-'+moveWidth+'px;');
			}
		}else{
			var moveWidth = moveNum*btn_width;
			$('.button-lclb').attr('style','left:-'+moveWidth+'px;');
		}
	}
}
//导航栏右移
function moveRight(){
	var lbWidth = $('.button-lclb').width();
	//先获取已经左移的像素
	var leftPX = $('.button-lclb').css("left");
	var leftPXNum = leftPX.substring(0,leftPX.length-2);
	//如果已经左移了，则进行右移，没有则不执行
	if(leftPXNum<0){
		var moveNum = Math.floor(lbWidth/btn_width)*btn_width;//一次移动多少像素
		var moveWidth = Number(leftPXNum) + Number(moveNum);
		if(Math.abs(moveWidth)<moveNum){
			$('.button-lclb').attr('style','left:0px;');
		}else{
			$('.button-lclb').attr('style','left:'+moveWidth+'px;');
		}
	}
}

scss代码

.button-lclb p{
    display: inline;
}
.nav-title{
    overflow: hidden;
    position: relative;
    .nav-move{
        position: absolute;
        display: inline-block;
        top: 15px;
        width: 42px;
        height: 42px;
        background-color: #FFFFFF;
        cursor: pointer;
        z-index: 2;
        img{
            display: block;
            vertical-align: middle;
            margin: 0 auto;
            margin-top: 9px;
        }
    }
    .nav-move-right{
        right: 0;
    }    
}
.button-lclb{
    margin: 15px 0 15px 0;
    padding: 0 42px;
    position: relative;
    left: 0;
    white-space: nowrap;
    font-size: 0;
    transition: all .2s;
    -webkit-transition: all .2s;
    li{
        display: inline-block;
//      margin: 0 3px;
        .btn-group-lclb{
            position: relative;
            margin: 0;
            padding: 10px 0;
            padding-left: 5px;
            padding-right: 18px;
            width: 120px;
            border: none;
            border-radius: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            border: 1px solid #f6f6f6;
            color: #666666;
            span{
                position: absolute;
                float: right;
                right: 4px;
                top: 12px;
            }    
        }
    }
}
.lclb-current,.lclb-current:active{
    background-color: #1a56a8 !important;
    color: #FFF !important;
}