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=""            :            :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如何实现无缝轮播效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！