import Swiper from '../components/Swiper'

<Swiper :speed="2" :direction="'left'"></Swiper> 

<template>
  <div class="swiperBox">
    <div class="directionIcon">
      <div class="imgLeft" @click="clickLeft"></div>
      <div class="imgRight" @click="clickRight"></div>
    </div>
    <div id="swiper">
      <div class="imgBox" @mouseenter="enter" @mouseleave="leave">
        <div class="imgDiv" v-for="(item, index) of imgList" :key="index">
          <img :src="item" />
          <span>{{ item }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    speed: Number,
    direction: String
  },
  data() {
    return {
      imgList: [
        require("../../assets/images/banner.jpg"),
        require("../../assets/images/banner.jpg"),
        require("../../assets/images/banner.jpg"),
        require("../../assets/images/banner.jpg"),
        require("../../assets/images/banner.jpg")
      ],
      timer: null,
      theSpeed: this.speed,
      imgWidth: 260,
      theDirection: this.direction
    };
  },
  created() {},
  mounted() {
    this.move();
  },
  methods: {
    //   左边
    clickLeft() {
      this.theDirection = "left";
    },
    // 右边
    clickRight() {
      this.theDirection = "right";
    },
    // 移入
    enter() {
      this.timer = clearInterval(this.timer);
    },
    leave() {
        this.move()
    },
    move() {
      var imgBox = document.getElementsByClassName("imgBox")[0];
      imgBox.innerHTML += imgBox.innerHTML;
      var imgDiv = document.getElementsByClassName("imgDiv");
      imgBox.style.width = imgDiv.length * this.imgWidth + "px"; //设置ul的宽度使图片可以放下
      let that = this;
      function autoScroll() {
        if (imgBox.offsetLeft < -(imgBox.offsetWidth / 2)) {
          //向左滚动
          imgBox.style.left = 0;
        }
        if (imgBox.offsetLeft > 0) {
          //向右滚动
          imgBox.style.left = -(imgBox.offsetWidth / 2) + "px";
        }
        if (that.theDirection == "left") {
          that.theSpeed = -Math.abs(that.theSpeed);
        } else {
          that.theSpeed = Math.abs(that.theSpeed);
        }
        imgBox.style.left = imgBox.offsetLeft + that.theSpeed + "px";
      }
        clearInterval(this.timer)
        this.timer = setInterval(autoScroll, 30); //全局变量 ，保存返回的定时器
        
    }
  },

  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>
<style scoped lang="less">
.swiperBox {
  height: 365px;
  width: 1200px;
  margin: 20px auto;
  position: relative;
}
.swiperBox .directionIcon {
  position: absolute;
  top: 45%;
  width: 100%;
  left: -10%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  opacity: 0.5;
  z-index: 9;
  pointer-events: none;
}

.swiperBox .directionIcon .imgLeft {
  position: absolute;
  left: 80px;
  width: 100px;
  height: 100px;
  background-size: 80%;
  background: red;
  cursor: pointer;
}

.swiperBox .directionIcon .imgRight {
  position: absolute;
  right: -160px;
  width: 100px;
  height: 100px;
  background-size: 80%;
  background: red;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  cursor: pointer;
}
.swiperBox #swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.swiperBox #swiper .imgBox {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.swiperBox #swiper .imgBox .imgDiv {
  width: 240px;
  height: 365px;
  margin-left: 15px;
  cursor: pointer;
}
.swiperBox #swiper .imgBox .imgDiv img {
  height: 100%;
  width: 100%;
}
</style>

第二种：推荐的 

 <div class="threeImg">
      <div class="iconleft" @click="zuohua">
      </div>
      <div class="Containt">
        <ul :style="{'left':calleft + 'px', width: widthData + 'px'} " v-on:mouseover="stopmove()" v-on:mouseout="move()" class="imgBoxoul">
          <li v-for="(item,index) in dataList" :key="index" @click="gotodetails(item.id)" ref="lis">
            <img :src="item.thumb" />
            <div class="item-content">
              <p class="item-title">{{item.title}}</p>
              <div class="item-detail line-2">{{item.subtitle}}</div>
              <p class="item-price">￥{{item.marketprice}}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="iconright" @click="youhua">
      </div>
    </div>

<script>
export default {
  data() {
    return {
      calleft: 0,
      speed:1
    };
  },

  created() {
    this.move();
  },
  mounted() {
    var imgBox = document.getElementsByClassName("imgBoxoul")[0];
      imgBox.innerHTML += imgBox.innerHTML;
  },
  props: ["dataList"],
  computed: {
    widthData(){
      return 240 * Number(this.dataList.length*2)
    }
  },
  methods: {
    //移动
    move() {
      this.timer = setInterval(this.starmove, 20);
    },
    //开始移动
    starmove() {
      this.calleft -= 1.2;//*this.speed
      if (this.calleft <= -1150) {
        this.calleft = 0;
      }
    },
    //鼠标悬停时停止移动
    stopmove() {
      clearInterval(this.timer);
    },
    //点击按钮左移
    zuohua() {
      this.calleft -= 240;//this.speed = 1
      if (this.calleft <= -1200) {
        this.calleft = 0;
      }
    },
    //点击按钮右移
    youhua() { //this.speed = -1
      this.calleft += 240;
      if (this.calleft >= 0) {
        this.calleft = -1200;
      }
    },
    
  }
};
</script>

<style>

.threeImg {
  position: relative;
}

.threeImg .Containt ul {
  margin: 0 auto;
  width: 2400px;
  position: absolute;
  left: 0px;
  cursor: pointer;
  height: 100%;
  z-index: 10;
}

.threeImg .Containt ul li {
  float: left;
  width: 220px;
  height: 350px;
  margin-right: 20px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #ffffff;
}

.threeImg .Containt ul li img {
  width: 100%;
  height: 263px;
}

.Containt {
  position: relative;
  padding: 60px 0;
  overflow-y: auto;
  width: 1200px;
  height: 365px;
  overflow: hidden;
  margin: 0 auto;
}

.iconleft {
  position: absolute;
  width: 20px;
  height: 80px;
  top: 35%;
  left: 15%;
  z-index: 99999;
  background: url("~@/assets/image/left.png") no-repeat;
  cursor: pointer;
}

.iconright {
  position: absolute;
  top: 37%;
  right: 15%;
  width: 20px;
  height: 80px;
  z-index: 99999;
  background: url("~@/assets/image/left.png") no-repeat;
  -webkit-transform:rotate(180deg);
  cursor: pointer;
}
</style>