有首尾的跑马灯

<div style="position:relative;width:1200px;margin:0 auto;">
        <div class="userProduct">
        <ul :style="{width:397*userProduct.length+'px',left:userMoveLength+'px'}">
          <li v-for="(item, index) in userProduct" :key="index">
            <a target="_Blank" :href="item.href">
              <img :src="item.img" alt="">
            </a>
          </li>
        </ul>
      </div>
      <span class="btn leftBtn" @click="moveRight(-1)"></span>
      <span class="btn rightBtn" @click="moveRight(1)"></span>
      </div>

moveRight(code){//1向右移动,-1向左移动
      if(code==1){
        let curStep = this.userProduct.length-this.moveNum-3
        if(curStep==0){
          this.$message('已经到尾页')
          return
        }else if(curStep<3){
          this.moveNum+=curStep
          this.userMoveLength+=-curStep*397
        }else{
          this.moveNum+=3
          this.userMoveLength+=-3*397
        }
      }else if(code==-1){
        let curleftStep = this.moveNum
        if(curleftStep==0){
          this.$message('已经到首页')
          return
        }else if(curleftStep<3){
          this.moveNum-=curleftStep
          this.userMoveLength+=curleftStep*397
        }else{
          this.moveNum-=3
          this.userMoveLength+=3*397
        }
      }
    },