js实现左右切换轮播图

 

<template>
  <div class="panel-work-entry bs-bg-color-white">
    <div style="background:green;position:relative">
      <i class="el-icon-arrow-left left-arrow-menu poi" v-show="navLeftArrow"></i>
      <div class="main-contain">
        <div class="fix main-contain-x">
          <div class="main-contain-item l">1</div>
          <div class="main-contain-item l">2</div>
          <div class="main-contain-item l">3</div>
          <div class="main-contain-item l">4</div>
          <div class="main-contain-item l">5</div>
          <div class="main-contain-item l">6</div>
          <div class="main-contain-item l">7</div>
          <div class="main-contain-item l">8</div>
          <div class="main-contain-item l">9</div>
          <div class="main-contain-item l">10</div>
          <div class="main-contain-item l">11</div>
          <div class="main-contain-item l">12</div>
          <div class="main-contain-item l">13</div>
          <div class="main-contain-item l">14</div>
          <div class="main-contain-item l">15</div>
          <div class="main-contain-item l">16</div>
          <div class="main-contain-item l">17</div>
          <div class="main-contain-item l">18</div>
          <div class="main-contain-item l">19</div>
          <div class="main-contain-item l">20</div>
          <div class="main-contain-item l">21</div>
          <div class="main-contain-item l">22</div>
          <div class="main-contain-item l">23</div>
        </div>
      </div>
      <i class="el-icon-arrow-right right-arrow-menu poi" v-show="navRightArrow"></i>
    </div>

  </div>
</template>

<script>
import $ from 'jquery';
export default {
  props: {},
  data() {
    return {
      navIndex: 0,
      maxIndex: 0,
      navLeftArrow: false,
      navRightArrow: false,
    };
  },
  methods: {
    handleScroll() {
      let vm = this;
      let width = 0;
      let menuWrapWidth = $('.main-contain').width();
      $('.main-contain-item').each((i, e) => {
        width += $(e).innerWidth() + 1;
      });
      if (width > menuWrapWidth) {
        this.navRightArrow = true;
        vm.maxIndex = Math.ceil((width - menuWrapWidth) / 160);
        console.log(vm.maxIndex, 'vm.maxIndex');
        $('.left-arrow-menu').click(() => {
          vm.navIndex--;
          vm.navRightArrow = true;
          console.log(vm.navIndex * 170, 'vm.navIndex * 150');
          $('.main-contain-x').animate({ left: vm.navIndex * -170 }, 200);
          vm.navLeftArrow = vm.navIndex === 0 ? false : true;
        });
        $('.right-arrow-menu').click(() => {
          vm.navIndex++;
          vm.navLeftArrow = true;
          console.log(vm.navIndex * -170, 'vm.navIndex * -150');
          $('.main-contain-x').animate({ left: vm.navIndex * -170 }, 200);
          vm.navRightArrow = vm.navIndex === this.maxIndex ? false : true;
        });
      }
    },
  },
  computed: {},
  mounted() {
    this.handleScroll();
  },
};
</script>

<style lang="scss" scoped>
.left-arrow-menu {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  left: 0px;
}
.right-arrow-menu {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: 0px;
}
.main-contain {
  overflow: hidden;
  position: relative;
  width: 92%;
  height: 30px;
  margin: 0 auto;
  background-color: lightblue;
  .main-contain-x {
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
    .main-contain-item {
      width: 150px;
      height: 30px;
      display: inline-block;
      margin-left: 10px;
      background-color: lightcoral;
    }
  }
}
</style>