脚本宝典收集整理的这篇文章主要介绍了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>
导入模块
图片数据
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实现无缝轮播效果所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。