tab页过多，展现按钮可左右移动tab页

1，结果如下图，tab太多，一行放不下，右侧展现左右按钮，鼠标移上tab页可左右移动 

2，代码

/**
 * 功能按钮过多时，可左右移动
 * @param {*} id 按钮区域id
 * @param {*} dom 按钮元素
 * @param {*} btnclass 按钮样式
 * @param {*} mp 每个按钮需要增加的宽度
 * @param {*} n 隐藏按钮增加的个数
 */
 function btnShowOrHide(id, dom, btnclass='', mp=0, n=0) {
	var $skyBtnGroup = $(id);
    // 先把所有应该展示的按钮展示出来
    $skyBtnGroup.find('.btnum').show();
	// 按钮过多，添加展开收起功能
	$skyBtnGroup.find(dom+':visible').addClass('btnum');
	// 隐藏的按钮移到最后面
	$skyBtnGroup.find(dom+':hidden').each(function (i, item) {
		$skyBtnGroup.append(item);
	});
	var $btnArr = $skyBtnGroup.find('.btnum');
	$btnArr.show();
	var skyWidth = $skyBtnGroup.width();
	var btnumber = $btnArr.length;
	var btnWidth = 0;

	$btnArr.each(function (i, item) {
		btnWidth += ($(item).width() + mp);
		if (btnWidth >= skyWidth) {
			btnumber = i - 1;
			return false;
		}
	})

	if ($btnArr.length > btnumber) {    //按钮大于n个
		// var showIconHtml = '<i class="fa fa-angle-double-down sh-btn" id="shBtn"></i>';
		var showIconHtml = '<i class="fa fa-angle-double-left sh-btn '+btnclass+' not-use" id="lBtn"></i><i class="fa fa-angle-double-right sh-btn '+btnclass+'" id="rBtn"></i>';
		if ($('#btnIconTd').length > 0) {  //如果已经有按钮，先删除
			$('#btnIconTd').remove();
		}

		// 追加左右按钮
    if(id == '.sky-btn-group') {
      $skyBtnGroup.after('<td id="btnIconTd" style="padding-right: 8px;">' + showIconHtml + '</td>');
    }else{
      $skyBtnGroup.after('<div id="btnIconTd" class="fl" style="padding-right: 8px;">' + showIconHtml + '</div>');
    }
		
		// 先隐藏掉多余的按钮
		var $moreBtn = $skyBtnGroup.find('.btnum:gt(' + Number(btnumber - n) + ')');
		$moreBtn.hide();
		var skyWidth = $skyBtnGroup.width();

		$('#rBtn').hover(function () {   //右按钮
			interval = setInterval(function () {
				var totalWidth = 0;
				$skyBtnGroup.find('.btnum:visible').each(function (i, item) {
					totalWidth = totalWidth + $(item).width() + mp
				})
				var lastBtn = $skyBtnGroup.find('.btnum:visible:last');
				var firstBtn = $skyBtnGroup.find('.btnum:visible:first');
				var lastNextBtn = lastBtn.next('.btnum');
				if (lastNextBtn.length > 0) {
					$('#rBtn').removeClass('not-use');
					$('#lBtn').removeClass('not-use');
					lastNextBtn.show();
					var lastNextBtnWidth = lastNextBtn.width() + mp;
					lastNextBtn.hide();
					var realWidth = totalWidth - firstBtn.width() - mp + lastNextBtnWidth;
					if (realWidth <= skyWidth) {
						if (totalWidth + lastNextBtnWidth > skyWidth) {
							firstBtn.hide();
						}
						lastNextBtn.show();
					} else {
						firstBtn.hide();
					}

				} else {
					$('#rBtn').addClass('not-use');
					clearInterval(interval)
				}
			}, 500)
		}, function () {
			clearInterval(interval)
		})
		$('#lBtn').hover(function () {  //左按钮

			interval = setInterval(function () {
				var numleft = $skyBtnGroup.find('.btnum:visible').length;
				var totalWidth = 0;
				$skyBtnGroup.find('.btnum:visible').each(function (i, item) {
					totalWidth = totalWidth + $(item).width() + mp
				})
				var lastBtn = $skyBtnGroup.find('.btnum:visible:last');
				var firstBtn = $skyBtnGroup.find('.btnum:visible:first');
				var firstPrevBtn = firstBtn.prev('.btnum');
				if (firstPrevBtn.length > 0) {
					firstPrevBtn.show();
					var firstPrevBtnWidth = firstPrevBtn.width() + mp;
					firstPrevBtn.hide();
					var realWidth = totalWidth - lastBtn.width() - mp + firstPrevBtnWidth;
					if (realWidth <= skyWidth) {
						$('#lBtn').removeClass('not-use');
						$('#rBtn').removeClass('not-use');
						if (totalWidth + firstPrevBtnWidth > skyWidth) {
							lastBtn.hide();
						}
						firstPrevBtn.show();
					} else {
						lastBtn.hide();
					}

				} else {
					$('#lBtn').addClass('not-use');
					clearInterval(interval)
				}
			}, 500);//启动计时器，调用overs函数，

		}, function () {
			clearInterval(interval)
		})
	} else {
		$('#btnIconTd').remove();
		$skyBtnGroup.find('button.btnum').show();
	}
}

3，在需要的地方调用方法即可

 // tab页过多时，增加左右按钮
 btnShowOrHide('#tab_inner', 'li', 'tab-more');