本文实例为大家分享了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" ><</ 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 ;
}
.tt 1 {
right : 0 ;
}
.box {
width : 500px ;
height : 300px ;
margin : 100px auto ;
position : relative ;
overflow : hidden ;
}
.box 1 img {
position : absolute ;
left : 0px ;
top : 0 ;
width : 500px ;
height : 300px ;
}
.animaton {
transition: left 0.75 s;
}
</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" ),
],
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/m0_53714569/article/details/115555475