<template>
<div class="lunbobox">
<div class="lunbo">
<!-- 四张轮播图 宽960高375-->
<transition-group tag="ul" name="image">
<li v-for="(img,index) in imgARrray" v-show="index===mark" key="index">
<a href="#" >
<img :src="img">
</a>
</li>
</transition-group>
</div>
<div class="bar">
<span
v-for="(item,index) in imgARrray"
:class="{'active':index===mark}"
@click="change(index)"
:key="index"
></span>
</div>
</div>
</template>
<script>
import { setInterval } from "timers";
import { clearInterval } from "timers";
export default {
data() {
return {
timer: null, //定时器
mark: 0, //比对图片索引的变量
imgARrray: [
"/static/shouye/banner1.png",
"/static/shouye/banner_01.png",
"/static/shouye/lunbo3.png",
"/static/shouye/lunbo4.png"
]
};
},
methods: {
autoPlay() {
this.mark++;
if (this.mark === 4) {
//遍历到最后一张图片置零
this.mark = 0;
}
},
play() {
setInterval(this.autoPlay, 2500);
},
change(i) {
this.mark = i;
},
stop() {
clearInterval(this.timer);
},
move() {
this.timer = setInterval(this.autoPlay, 2500);
}
},
created() {
this.play();
}
};
</script>
<style lang='scss'>
* {
margin: 0;
padding: 0;
list-style: none;
}
.lunbobox {
//轮播总容器开始的大括号
widows: 100%;
height: 375px;
margin-top: -16px;
// 屏幕宽度小于520的时候top=-32px
overflow: hidden;
position: relative;
z-index: -2;
.lunbo {
//轮播图片小容器开始的大括号
widows: 100%;
height: 375px;
// 轮播图的过渡样式的开始
.image-enter-active {
transform: translateX(0);
transition: all 1.5s ease;
}
.image-leave-active {
transform: translateX(-100%);
transition: all 1.5s ease;
}
.image-enter {
transform: translateX(100%);
}
.image-leave {
transform: translateX(0);
}
// 轮播图的过渡样式的结束
li {
//轮播图片li开始的大括号
position: absolute;
// width: 100%;
min-width: 100%;
height: 375px;
.image-enter-active {
transform: translateX(0);
transition: all 1.5s ease;
}
img {
//轮播图片开始的大括号
width: 100%;
// height: 100%;
} //轮播图片结束的大括号
} //轮播li结束的大括号
} //轮播图片小容器结束的大括号
.bar {
//轮播底部 圈圈的开始
position: absolute;
width: 100%;
bottom: 10px;
margin: 0 auto;
z-index: 10;
text-align: center;
span{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
margin-right: 10px;
}
.active {
background: #ffffff !important;
}
} //轮播底部 圈圈的结束
} //轮播总容器开始的大括号的结束
<template>
<div class="lunbobox">
<div class="lunbo">
<!-- 四张轮播图 宽960高375-->
<transition-group tag="ul" name="image">
<li v-for="(img,index) in imgARrray" v-show="index===mark" key="index">
<a href="#" >
<img :src="img">
</a>
</li>
</transition-group>
</div>
<div class="bar">
<span
v-for="(item,index) in imgARrray"
:class="{'active':index===mark}"
@click="change(index)"
:key="index"
></span>
</div>
</div>
</template>
<script>
import { setInterval } from "timers";
import { clearInterval } from "timers";
export default {
data() {
return {
timer: null, //定时器
mark: 0, //比对图片索引的变量
imgARrray: [
"/static/shouye/banner1.png",
"/static/shouye/banner_01.png",
"/static/shouye/lunbo3.png",
"/static/shouye/lunbo4.png"
]
};
},
methods: {
autoPlay() {
this.mark++;
if (this.mark === 4) {
//遍历到最后一张图片置零
this.mark = 0;
}
},
play() {
setInterval(this.autoPlay, 2500);
},
change(i) {
this.mark = i;
},
stop() {
clearInterval(this.timer);
},
move() {
this.timer = setInterval(this.autoPlay, 2500);
}
},
created() {
this.play();
}
};
</script>
<style lang='scss'>
* {
margin: 0;
padding: 0;
list-style: none;
}
.lunbobox {
//轮播总容器开始的大括号
widows: 100%;
height: 375px;
margin-top: -16px;
// 屏幕宽度小于520的时候top=-32px
overflow: hidden;
position: relative;
z-index: -2;
.lunbo {
//轮播图片小容器开始的大括号
widows: 100%;
height: 375px;
// 轮播图的过渡样式的开始
.image-enter-active {
transform: translateX(0);
transition: all 1.5s ease;
}
.image-leave-active {
transform: translateX(-100%);
transition: all 1.5s ease;
}
.image-enter {
transform: translateX(100%);
}
.image-leave {
transform: translateX(0);
}
// 轮播图的过渡样式的结束
li {
//轮播图片li开始的大括号
position: absolute;
// width: 100%;
min-width: 100%;
height: 375px;
.image-enter-active {
transform: translateX(0);
transition: all 1.5s ease;
}
img {
//轮播图片开始的大括号
width: 100%;
// height: 100%;
} //轮播图片结束的大括号
} //轮播li结束的大括号
} //轮播图片小容器结束的大括号
.bar {
//轮播底部 圈圈的开始
position: absolute;
width: 100%;
bottom: 10px;
margin: 0 auto;
z-index: 10;
text-align: center;
span{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
margin-right: 10px;
}
.active {
background: #ffffff !important;
}
} //轮播底部 圈圈的结束
} //轮播总容器开始的大括号的结束
@media screen and (max-width:520px){
.lunbobox {
margin-top:-32px;
}
}
</style>
</style>
vue 轮播图
最新推荐文章于 2023-08-26 16:51:26 发布