Vue实现无缝轮播效果

本文实例为大家分享了Vue实现无缝轮播效果的具体代码，供大家参考，具体内容如下

代码

1.子组件代码

代码如下（示例）：

template>
      div>
        div class="box" @mouseenter="mouse" @mouseleave="mouseleave">
          ul class="box1">
            li>
          img            :src="n"            v-for="(n, i) in imgs"            :key="i"            alt=""            :style="{
 left: (i - index) * 500 + 'px' }
    "            :class="hasAni ? 'animaton' : ''"          />
            /li>
          /ul>
          p class="tt" @click="left">
    &
    lt;
    /p>
          p class="tt1" @click="right">
    >
    /p>
        /div>
      /div>
    /template>
    

script代码如下（示例）：

script>
export default {
  name: "Lunbo",  PRops: ["imgs"],  data() {
    return {
      // js中使用图片,需要采用require导入      index: 1,      hasAni: true,      istrue: true,    }
    ;
  }
,  methods: {
    mouse() {
          clearInterval(this.timer);
    }
,    mouseleave() {
          this.timer = setInterval(() =>
 {
            this.index++;
            this.hasAni = true;
        if (this.index == this.imgs.length - 1) {
              setTimeout(() =>
 {
                this.index = 0;
                this.hasAni = false;
          }
    , 750);
        }
      }
    , 1500);
    }
,    right() {
      if (this.istrue) {
            this.index++;
            this.hasAni = true;
            this.istrue = false;
        if (this.index == this.imgs.length - 1) {
              setTimeout(() =>
 {
                this.index = 1;
                this.hasAni = false;
          }
    , 750);
        }
            setTimeout(() =>
 {
              this.istrue = true;
        }
    , 1000);
      }
    }
,    left() {
       if (this.istrue) {
            this.index--;
            this.hasAni = true;
            this.istrue = false;
        if (this.index == 0) {
              setTimeout(() =>
 {
                this.index = this.imgs.length - 1;
                this.hasAni = false;
          }
    , 750);
        }
            setTimeout(() =>
 {
              this.istrue = true;
        }
    , 1000);
      }
    }
,  }
,  activated() {
        console.LOG(1);
        this.timer = setInterval(() =>
 {
          this.index++;
          this.hasAni = true;
      if (this.index == this.imgs.length - 1) {
            setTimeout(() =>
 {
              this.index = 0;
              this.hasAni = false;
        }
    , 750);
      }
    }
    , 1500);
  }
,  decativated() {
        clearInterval(this.timer);
  }
,}
    ;
    /script>
    

css

style scoPEd>
p {
      width: 30px;
      height: 60px;
      background-color: rgba(46, 139, 86, 0.356);
      line-height: 60px;
      font-Size: 24px;
      posITion: absolute;
      top: 105px;
}
.tt {
      left: 0;
}
.tt1 {
      right: 0;
}
.box {
      width: 500px;
      height: 300px;
      margin: 100px auto;
      position: relative;
      overflow: hidden;
}
.box1 img {
      position: absolute;
      left: 0px;
      top: 0;
      width: 500px;
      height: 300px;
}
.animaton {
      transition: left 0.75s;
}
    /style>
    

2.父组件代码

父组件

keep-alive>
          Lunbo :imgs="imgs" />
    /keep-alive>
    

导入模块

import Lunbo From "./components/Lunbo";
    

图片数据

data() {
    return {
      imgs:[        require("./assets/6.jpg"),        require("./assets/1.jpg"),        require("./assets/2.jpg"),        require("./assets/3.jpg"),        require("./assets/4.jpg"),        require("./assets/5.jpg"),        require("./assets/6.jpg"),        require("./assets/1.jpg"),      ],    }
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 使用Vue制作图片轮播组件思路详解
• 基于vue.js实现图片轮播效果
• 基于vue.js轮播组件vue-awesome-swiper实现轮播图
• Vue 过渡实现轮播图效果
• vue中引用swiper轮播插件的教程详解
• vue.js整合mint-ui里的轮播图实例代码
• vue.js实现简单轮播图效果
• vue轮播图插件vue-concise-slider的使用
• 利用Vue实现移动端图片轮播组件的方法实例
• vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！