本文实例为大家分享了Vue实现无缝轮播效果的具体代码，供大家参考，具体内容如下
代码
1.子组件代码
代码如下（示例）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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"><</p> <p class="tt1" @click="right">></p> </div> </div></template> |
script代码如下（示例）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<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.父组件代码
父组件
|
1
2
3
|
<keep-alive> <Lunbo :imgs="imgs" /></keep-alive> |
导入模块
|
1
|
import Lunbo from "./components/Lunbo"; |
图片数据
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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"), ], } |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/m0_53714569/article/details/115555475
