vue移动端轮播图插件,vue.js轮播图
这篇文章主要介绍了某视频剪辑软件实现上下层叠轮播图，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
上下层叠轮播图原生轮播图（无缝轮播图)
上下层叠轮播图
1.效果
2.代码
模板
div class= article-main @ mouse over= mouse over() @ mouse leave= mouse leave()
img src=././assets/a3.jpeg :class=v1 /
img src=././assets/a2.jpeg :class=v2 /
img src=././assets/a1.jpeg :class=v3 /
div class=点视图
div :class=dot1
/div
div :class=dot2
/div
div :class=dot3
/div
/div
div class= arrow-view v-show=处于活动状态
img src=././assets/BTN-l-d . png class= arrow-left @ click= to left()/
img src=././assets/BTN-r-d . png class= arrow-right @ click= to right()/
/div
/div
/模板
脚本
导出默认值{
姓名：家，
data() {
返回{
计时器： ,
isActive:假的，
值：1,
v1:横幅wz1 ，
v2:横幅wz2 ，
v3:横幅wz3 ，
点1:点1 点颜色激活，
点2:点2点-颜色-正常，
点3:点-3点-颜色-正常
}
},
方法：{
toLeft() {
这个值-
if (this.value==0) {
this.value=3
}
this.changeClasss()
},
toRight() {
这个值
如果(本值3) {
this.value=1
}
this.changeClasss()
},
mouseOver() {
this.isActive=true
清除间隔(这个。定时器)；
},
//移出
mouseLeave() {
this.isActive=false
这个。timer=setInterval(这个。得到，3000)；
},
changeClasss() {
if (this.value==1) {
this.v1=banner wz1
this.v2=banner wz2
this.v3=banner wz3
这个。dot 1= dot-1 dot-color-active
这个. dot2=dot-2点-颜色-正常
这个。dot3= dot-3点颜色正常
}
if (this.value==2) {
this.v1=banner wz2
this.v2=banner wz3
this.v3=banner wz1
这个。dot1= dot-1点-颜色-正常
这个. dot2=dot-2点颜色激活
这个。dot3= dot-3点颜色正常
}
if (this.value==3) {
this.v1=banner wz3
this.v2=banner wz2
this.v3=banner wz1
这个。dot1= dot-1点-颜色-正常
这个. dot2=dot-2点颜色正常
这个。dot 3= dot-3 dot-color-active
}
},
get() {
这个值
如果(本值3) {
this.value=1
}
this.changeClasss()
}
},
已安装(){
这个。timer=setInterval(这个。得到，3000)；
},
销毁前(){
清除间隔(这个。定时器)；
},
}
/脚本
样式范围。向左箭头{
位置：绝对；
左：20px
顶配：250像素
光标：指针；
}。向右箭头{
位置：绝对；
左：280像素
顶配：250像素
光标：指针；
}。文章-主页{
宽度：320像素
高度：300像素
背景色：# aaffff
位置：相对；
}。横幅{
边框-半径：4px
位置：绝对；
过渡：全1;
}。wz1 {
宽度：280像素
高度：200像素
左：20px
z指数：777;
top:20px；
}。wz2 {
宽度：290像素
高度：200像素
左：15px
顶配：30px
z指数：888;
}。wz3 {
宽度：300像素
高度：200像素
左：10px
top:40px；
z指数：999;
}。点视图{
位置：绝对；
左：120像素
顶配：255像素
显示器：flex
弯曲方向：行；
}。点颜色激活{
背景色：# ff0000
}。点-颜色-正常{
背景色：# 333;
}。点1 {
宽度：10px
高度：10px
边界半径：50%;
}。点-2 {
宽度：10px
高度：10px
边界半径：50%;
左边距：20px
}。点-3 {
左边距：20px
宽度：10px
高度：10px
边界半径：50%;
}
/风格
原生轮播图（无缝轮播图）
效果图
模板
差异
div class=swiper
ul ref=swiper class=swipero
li v-for=(item，index) in items :key=index
div v-text=item.name/div
/李
/ul
/div
div @click=preNext()下一页/div
div @click=preLast()上一页/div
/div
/模板
脚本
导出默认值{
data() {
返回{
项目：[
{ id: 1，姓名： 1 },
{ id: 1，姓名： 2 },
{ id: 1，姓名： 3 },
],
计时器：空，
活动：0,
标志：真的，
};
},
已安装(){
这个。init()；
},
方法：{
//初始化克隆一个元素，用来解决视觉差的效果（瞬移)
init() {
让swiper=这个refs.swiper
let first=swiper。firstelementchild。克隆节点(true)；
斯威珀。appendchild(第一个)；
},
//下一页
下一个(){
让swiper=这个refs.swiper
//判断是否是最后一个
//调试器；
如果（这个参考文献。斯威珀。孩子。长度-2=这个。活动){
//调试器
setTimeout(()={
让swiper=这个refs.swiper
这个。active=0；
斯威珀。风格。transition=“none”；
斯威珀。风格。左=-200 *这个。活动的“px”；
}, 500);
}
this.active
斯威珀。风格。transition= all。5s’；
斯威珀。风格。左=-200 *这个。活动的“px”；
},
//上一页
pre() {
让swiper=这个refs.swiper
//判断是否是第一个，线瞬间移动到最后，然后再实现动画效果
if (this.active==0) {
让len=这个参考文献。斯威珀。孩子。长度；
这个。active=len-1；
//调试器
斯威珀。风格。transition=“none”；
斯威珀。风格。左=-200 *这个。活动的“px”；
setTimeout(()={
这个。active=len-2；
斯威珀。风格。transition= all。5s’；
斯威珀。风格。左=-200 *这个。活动的“px”；
}, 300);
}否则{
这个。主动-；
斯威珀。风格。transition= all。5s’；
斯威珀。风格。左=-200 *这个。活动的“px”；
//这个。swiper()；
}
},
//节流
油门（回调，速度=3000) {
让自我=这个；
if (self.flag) {
清除超时(这。定时器)；
self.timer=setTimeout(()={
回调();
self.flag=true
},速度);
}
this.flag=false
},
//下一页（节流)
preNext() {
this.throttle(this.next，1000)；
},
//上一页（节流)
preLast() {
this.throttle(this.pre，1000)；
},
//自动轮播
swiper() {
让自我=这个；
setInterval(()={
自我。pre()；
}, 3000);
},
},
};
/脚本
style lang=less 范围。swiper {
宽度：200像素
高度：200像素
溢出：隐藏；
位置：相对；
ul {
位置：绝对；
底部：0;
左：0;
宽度：100vw
空白：nowrap
李{
宽度：200像素
高度：200像素
显示：内嵌-块；
垂直对齐：底部；
位置：相对；
//边距-右侧：20px
过渡：全0.5s
部门{
宽度：100%;
身高：100%;
}
：第n个孩子(1) {
背景色：海蓝宝石；
}
：第n个孩子(2) {
背景色：rgb(255，204，127)；
}
：第n个孩子(3) {
背景色：rgb(255，127，144)；
}
：第n个孩子(4) {
背景色：rgb(127，255，223)；
}
}。活动{
宽度：400像素
高度：400像素
}
}
}
/风格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。