常用的vue轮播组件,vue.js轮播图
这篇文章主要为大家详细介绍了某视频剪辑软件实现无缝轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现无缝轮播效果的具体代码，供大家参考，具体内容如下
代码
1.子组件代码
代码如下（示例):
模板
差异
div class= box @ mouse enter= mouse @ mouse leave= mouse leave
ul class=box1
里
图片
:src=n
v-for=(n，i) in imgs
:key=i
alt=
:style= { left:(I-index)* 500 px }
：哈萨尼？动画 :
/
/李
/ul
p class= TT @ click= left lt；/p
p class=tt1 @click=right/p
/div
/div
/模板
脚本代码如下（示例):
脚本
导出默认值{
姓名：伦博，
道具：[imgs]，
data() {
返回{
//js中使用图片，需要采用需要导入
指数：1,
哈萨尼：是的，
istrue:没错，
};
},
方法：{
鼠标(){
清除间隔(这个。定时器)；
},
mouseleave() {
this.timer=setInterval(()={
this .索引
this.hasAni=true
如果(这个。指数==这个。imgs。长度-1){
setTimeout(()={
这个。索引=0；
this.hasAni=false
}, 750);
}
}, 1500);
},
右(){
if (this.istrue) {
this .索引
this.hasAni=true
this.istrue=false
如果(这个。指数==这个。imgs。长度-1){
setTimeout(()={
这个。指数=1；
this.hasAni=false
}, 750);
}
setTimeout(()={
this.istrue=true
}, 1000);
}
},
左(){
if (this.istrue) {
这个。索引-；
this.hasAni=true
this.istrue=false
if (this.index==0) {
setTimeout(()={
这个。指数=这个。imgs。长度-1；
this.hasAni=false
}, 750);
}
setTimeout(()={
this.istrue=true
}, 1000);
}
},
},
已激活(){
控制台。日志(1)；
this.timer=setInterval(()={
this .索引
this.hasAni=true
如果(这个。指数==这个。imgs。长度-1){
setTimeout(()={
这个。索引=0；
this.hasAni=false
}, 750);
}
}, 1500);
},
失活(){
清除间隔(这个。定时器)；
},
};
/脚本
钢性铸铁
样式范围
p {
宽度：30px
高度：60px
背景色：rgba(46，139，86，0.356)；
行高：60px
字体大小：24px
位置：绝对；
top:105 px；
}。tt {
左：0;
}。tt1 {
右：0;
}。方框{
宽度：500像素
高度：300像素
边距：100像素自动；
位置：相对；
溢出：隐藏；
}。方框1图像{
位置：绝对；
左：0px
top:0；
宽度：500像素
高度：300像素
}。动画{
转场：左0.75秒
}
/风格
2.父组件代码
父组件
点火电极
Lunbo :imgs=imgs /
/保持活力
导入模块
从导入伦博./components/LUN bo ；
图片数据
data() {
返回{
毕业生
要求(。/资产/6。jpg’)，
要求(。/assets/1.jpg )，
要求(。/资产/2。jpg’)，
要求(。/资产/3。jpg’)，
要求(。/资产/4。jpg’)，
要求(。/资产/5。jpg’)，
要求(。/资产/6。jpg’)，
要求(。/assets/1.jpg )，
],
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。