vue页面轮播,网页banner轮播怎么做
这篇文章主要为大家详细介绍了某视频剪辑软件实现首页旗帜自动轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现首页旗帜自动轮播的具体代码，供大家参考，具体内容如下
效果如图：
创建Banner.vue组件，需传入旗帜数组，可设置轮播间隔女士
模板
标题数据。长度
div class=" m-横幅-列表"
差异
u横幅-项目淡出
v-for=(item，index) in bannerData
:key=index
v-show=index===activeIndex
:style= ` background:URL($ { item。tu pian })不重复；背景-尺寸：封面；`
@ mouse over= on over() @ mouse out= on out()
a :href=item.link/a
/div
/div
v-if=bannerData.length 1
标题数据中的div v-for=(item，index :key= index :class=[ u-dot-item ，{ active:index===activeIndex }] @ mouseenter= on enter(index) @ mouseleave= on leave
/div
/div
/div
/模板
脚本
导出默认值{
名称：横幅，
道具：{
bannerData: { //横幅数组
类型：数组，
默认值：()={
return []
}
},
间隔：{ //切换间隔女士
类型：数量，
默认值：3000
}
},
data () {
返回{
activeIndex: 0，
计时器：空
}
},
已安装(){
setTimeout(()={
this.startSlider()
}, 1000)
},
方法：{
onOver () {
clearInterval(this.timer)
},
onOut () {
this.startSlider()
},
onEnter(索引){
this.activeIndex=index
clearInterval(this.timer)
},
onLeave () {
this.startSlider()
},
startSlider () {
clearInterval(this.timer)
if (this.bannerData.length 1) {
这个。timer=setInterval(这个。移动时，此间隔)
}
},
onMove () {
如果(这个。活跃指数===这个。横幅数据。长度-1){
this.activeIndex=0
}否则{
this.activeIndex
}
}
},
销毁前(){
clearInterval(this.timer)
this.timer=null
}
}
/脚本
style lang=less 范围
@主色：# 108 ee9。移动横幅包装{
宽度：100%;
高度：600像素
最小宽度：1200像素；
边距：0自动；
溢出：隐藏；
位置：相对；移动横幅列表{
高度：600像素。u-banner项目{
最小宽度：1200像素；
高度：600像素
宽度：100%;
一个{
显示：块；
身高：100%;
}
}。褪色{
动画：淡入淡出0.5s//切换旗帜时的过渡效果
}
@关键帧淡化{
0% {不透明度：0;}
5% {不透明度：0.05;}
10% {不透明度：0.1;}
20% {不透明度：0.2;}
35% {不透明度：0.35;}
50% {不透明度：0.5;}
65% {不透明度：0.65;}
80% {不透明度：0.8;}
90% {不透明度：0.9;}
95% {不透明度：0.95;}
100% {不透明度：1;}
}
}。m点列表{
宽度：600像素
位置：绝对；
底部：20px
左：50%;
左边距：-300 px；
文本对齐：居中；u-dot-item { //圆点样式
显示：内嵌-块；
宽度：12px
高度：12px
保证金：0 5px
背景：# fff
光标：指针；
边框：1px固体# fff
边界半径：50%;
不透明度：0.8;
}。活动{ //圆点选中样式
宽度：30px
背景：@ mainColor
边框：1px纯色@主色
边框半径：12px
不透明度：1;
}
}
}
/风格
在要使用的页面引入
横幅：横幅数据=横幅数据:间隔= 3000 /
从"@/组件/横幅"导入横幅
组件：{
旗帜
}
data () {
返回{
bannerData: [
{
链接： 跳转地址.,
src:图片地址.
},
{
链接： 跳转地址.,
src:图片地址.
},
{
链接： 跳转地址.,
src:图片地址.
}
]
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。