显示不全的菜单左右移动

    <div class="nav-box" style="height:50px;">
      <div class="nav inner">
        <a class="prev">left</a>
        <div class="picScroll">
          <ul>
            <li>
              <a href="#">菜单1</a>
            </li>
            <li>
              <a href="#">菜单2</a>
            </li>
            <li>
              <a href="#">菜单3</a>
            </li>
            <li>
              <a href="#">菜单4</a>
            </li>
            <li>
              <a href="#">菜单5</a>
            </li>
            <li>
              <a href="#">菜单6</a>
            </li>
            <li>
              <a href="#">菜单7</a>
            </li>
            <li>
              <a href="#">菜单8</a>
            </li>
            <li>
              <a href="#">111</a>
            </li>
            <li>
              <a href="#">222</a>
            </li>
            <li>
              <a href="#">333</a>
            </li>
            <li>
              <a href="#">444</a>
            </li>
          </ul>
        </div>
        <a class="next">right</a>
      </div>
    </div>

  mounted() {
    var oPic = $(".picScroll").find("ul");
    var oImg = oPic.find("li");
    var oLen = oImg.length + 1;
    var oLi = oImg.width();
    var prev = $(".prev");
    var next = $(".next");

    oPic.width(oLen * 162); //计算总长度
    var iNow = 0;
    var iTimer = null;
    prev.click(function() {
      if (iNow > 0) {
        iNow--;
      }
      ClickScroll();
    });
    next.click(function() {
      if (iNow < oLen - 8) {
        iNow++;
      }
      ClickScroll();
    });

    function ClickScroll() {
      oPic.animate({
        left: -iNow * 162
      });
    }
  },

<style scoped>

ul {
  list-style: none;
}
.nav-box .nav .prev {
  float: left;
  border: 1px solid forestgreen;
}
.nav-box .nav .next {
  float: right;
  border: 1px solid darkgoldenrod;
}
.nav-box .nav .picScroll {
  border: 1px solid gold;
  position: relative;
  height: 34px;
  width: 1150px;
  overflow: hidden;
  float: left;
}
.nav-box .nav .picScroll ul {
  position: absolute;
}
.nav-box .nav .picScroll ul li {
  width: 162px;
  float: left;
}
</style>