本文實例為大家分享了Vue實現無縫輪播效果的具體代碼，供大家參考，具體內容如下

1.子組件代碼

代碼如下（示例）：

<template> <div> <div @mouseenter='mouse' @mouseleave='mouseleave'> <ul class='box1'><li> <img :src='http://m.4tl426be.cn/bcjs/n' v-for='(n, i) in imgs' :key='i' alt='' : : /></li> </ul> <p @click='left'>&lt;</p> <p @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'), ], }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。