基於vue的無縫滑動輪播圖的較優解決方按

1.思路：

初始化的圖片位置如上：對應的頁面結構，將圖片按上面佈局，左邊始終放兩張，剩下放可視圖右邊。當進入循環時，讓圖片在可視圖外集合兩邊去切換拼接。這樣子就達到無縫拼接的效果，同時圖片的可視區，和即將可視區透明度為1，其他的為0.

// 
<template>
  <div class="home">
    <div class="roller" ref="roller" style="width:98%">
      <i class="el-icon-arrow-right" @click="turnRightClick"></i>
      <i class="el-icon-arrow-left" @click="turnLeftClick"></i>
      <img
        v-for="(item, index) in imgList"
        :src="item.imgUrl"
        :key="index"
        :style="{
          left: index < 3 ? lbtwidth*(index)  + 'px' : (lbtwidth)*(index-imgLength) + 'px',
          top: 0,
          opacity: index == 0 ? 1 : 0
        }"
        ref="img"
      />
    </div>
  </div>
</template>

css樣式：父盒子的溢出隱藏

// 
<style lang="less" scoped>
.home {
  .roller {
    border-radius: 15px;
    height: 250px;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    .el-icon-arrow-right {
      font-size: 30px;
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      cursor: pointer;
      z-index: 20;
    }
    .el-icon-arrow-left {
      font-size: 30px;
      position: absolute;
      top: 50%;
      left: 10px;
      cursor: pointer;
      transform: translateY(-50%);
      z-index: 20;
    }
    img {
      width: 100%;
      height: 250px;
      display: inline-block;
      position: absolute;
      z-index: 10;
      transition: left .5s;
    }
  }
}
</style>

核心代碼

//右滑
    turnRight() {
      this.num = this.num == this.imgLength-1 ? 0 : this.num+1  
      let img = this.$refs.img;
      if(this.num == 0){
        this.$refs.img[this.num].style.opacity = 1;
        this.$refs.img[this.num + this.imgLength-1].style.opacity = 1;
      }else{
        this.$refs.img[this.num - 1].style.opacity = 1;
        this.$refs.img[this.num].style.opacity = 1;
      }
      img.forEach((item,index)=>{
        if(this.num == 0){
          if(index !== 0 && index != this.imgLength-1){
            item.style.opacity = 0
          }
        }else{
          if(index != this.num -1 && index != this.num){
            item.style.opacity = 0
          }
        }
        item.style.left =parseInt(item.style.left) -  this.lbtwidth + 'px'
        if(item.style.left == -3*this.lbtwidth+"px"){
          item.style.left = (this.imgLength-3)*this.lbtwidth+"px"
        }
      })
    },

全部代碼

<template>
  <div class="home">
    <div class="roller" ref="roller" style="width:98%">
      <i class="el-icon-arrow-right" @click="turnRightClick"></i>
      <i class="el-icon-arrow-left" @click="turnLeftClick"></i>
      <img
        v-for="(item, index) in imgList"
        :src="item.imgUrl"
        :key="index"
        :style="{
          left: index < 3 ? lbtwidth*(index)  + 'px' : (lbtwidth)*(index-imgLength) + 'px',
          top: 0,
          opacity: index == 0 ? 1 : 0
        }"
        ref="img"
      />
    </div>
  </div>
</template>

<script>

export default {
  name: "home",
  components: {},
  data() {
    return {
      flag: true,
      imgLength:0,
      lbtwidth:0,
      num: 0,
        imgList: [
          {imgUrl: "https://img2.baidu.com/it/u=1352775884,3685114783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"},
          {imgUrl: "https://img0.baidu.com/it/u=4116279526,1070630630&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=375"},
          {imgUrl: "https://img0.baidu.com/it/u=1631970698,2867174335&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"},
          {imgUrl: "https://img2.baidu.com/it/u=2037073180,1444939679&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"},
          {imgUrl: "https://img2.baidu.com/it/u=2438949114,1234205976&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313"},
        ],
      start:"",
      restart:""
    };
  },
  created() {
    this.imgLength=this.imgList.length
    
  },
  mounted() {
    this.$nextTick(()=>{
      this.autoPlay(); 
      this.lbtwidth=this.$refs.roller.offsetWidth;
    })
  },
  beforeDestroy(){
    this.clear()
  },
  computed: {},
  methods: {
    //點擊右滑
    turnRightClick(){
      if(!this.flag){
        return
      }
      this.flag = false
      this.turnRight();
      this.clear();
      this.rePlay();
    },
    //右滑
    turnRight() {
      this.num = this.num == this.imgLength-1 ? 0 : this.num+1  
      let img = this.$refs.img;
      if(this.num == 0){
        this.$refs.img[this.num].style.opacity = 1;
        this.$refs.img[this.num + this.imgLength-1].style.opacity = 1;
      }else{
        this.$refs.img[this.num - 1].style.opacity = 1;
        this.$refs.img[this.num].style.opacity = 1;
      }
      img.forEach((item,index)=>{
        if(this.num == 0){
          if(index !== 0 && index != this.imgLength-1){
            item.style.opacity = 0
          }
        }else{
          if(index != this.num -1 && index != this.num){
            item.style.opacity = 0
          }
        }
        item.style.left =parseInt(item.style.left) -  this.lbtwidth + 'px'
        if(item.style.left == -3*this.lbtwidth+"px"){
          item.style.left = (this.imgLength-3)*this.lbtwidth+"px"
        }
      })
    },
    //點擊左滑
    turnLeftClick(){
      if(!this.flag){
        return
      }
      this.flag = false
      this.turnLeft()
      this.clear();
      this.rePlay()
    },
    //左滑
    turnLeft() {
      this.num = this.num == 0 ? this.imgLength-1 : this.num - 1  
      let img = this.$refs.img;
      if(this.num == this.imgLength-1){
        this.$refs.img[this.num].style.opacity = 1;
        this.$refs.img[this.num - this.imgLength+1].style.opacity = 1;
      }else{
        this.$refs.img[this.num + 1].style.opacity = 1;
        this.$refs.img[this.num].style.opacity = 1;
      }
      img.forEach((item,index)=>{
        if(this.num == this.imgLength-1){
          if(index !== 0 && index !=this.imgLength-1){
            item.style.opacity = 0
          }
        }else{
          if(index != this.num + 1 && index != this.num){
            item.style.opacity = 0
          }
        }
        item.style.left = parseInt(item.style.left) + this.lbtwidth + 'px'
        if(item.style.left == 3*this.lbtwidth+"px"){
          item.style.left = -(this.imgLength-3)*this.lbtwidth+"px"
        }
      })
    },
    //廣告牌自動播放
    autoPlay() {
      this.start = setInterval(()=>{
        this.turnRight()
      },3000)
    },
    //停止自動播放
    clear() {
      clearInterval(this.start)
    },
    //停止點擊後恢復自動播放
    rePlay(){
      if(this.restart){
        clearTimeout(this.restart);
      }
      this.restart = setTimeout(()=>{
        this.autoPlay()
      },5000)
    }
  },
  
  watch: {
    //限制切換廣告牌的頻率
    flag: function (newValue) {
      if (newValue == false) {
        setTimeout(() => {
          this.flag = true;
        }, 1000);
      }
    },
  },
};
</script>


<style lang="less" scoped>
.home {
  .roller {
    border-radius: 15px;
    height: 250px;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    .el-icon-arrow-right {
      font-size: 30px;
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      cursor: pointer;
      z-index: 20;
    }
    .el-icon-arrow-left {
      font-size: 30px;
      position: absolute;
      top: 50%;
      left: 10px;
      cursor: pointer;
      transform: translateY(-50%);
      z-index: 20;
    }
    img {
      width: 100%;
      height: 250px;
      display: inline-block;
      position: absolute;
      z-index: 10;
      transition: left .5s;
    }
  }
}
</style>