vue动画之轮播图
<template><div class="lunbo"><transition-group tag="ul" name="image"><li :key="0" v-show="lunboIndex === 0
·
<template>
<div class="lunbo">
<transition-group tag="ul" name="image">
<li :key="0" v-show="lunboIndex === 0"><img src="../../assets/imgs/t01e6e7b1790fcb40b2.jpg" alt="#"></li>
<li :key="1" v-show="lunboIndex === 1"><img src="../../assets/imgs/t01a83ee242957a054f.png" alt="#"></li>
<li :key="2" v-show="lunboIndex === 2"><img src="../../assets/imgs/t01e7d89615e1846abe.jpg" alt="#"></li>
<li :key="3" v-show="lunboIndex === 3"><img src="../../assets/imgs/t016fed337a2131cd83.jpg" alt="#"></li>
</transition-group>
<ul class="allbtn">
<li :class="{btncolor:btnNum===0}" @click="changemark(0)"></li>
<li :class="{btncolor:btnNum===1}" @click="changemark(1)"></li>
<li :class="{btncolor:btnNum===2}" @click="changemark(2)"></li>
<li :class="{btncolor:btnNum===3}" @click="changemark(3)"></li>
</ul>
<div class="leftbtn lunbobtn" @click="lunboJian()"><</div>
<div class="rightbtn lunbobtn" @click="lunboAdd()">></div>
</div>
</template>
<script>
export default {
data () {
return {
lunboIndex: 0,
timer: null,
btnNum: 0,
jieliu: null
}
},
methods: {
stoplunbo () {
clearInterval(this.timer)
this.timer = null
},
changemark (index) {
this.stoplunbo()
this.lunboIndex = index
this.btnNum = index
this.runlunbo()
},
lunboJian () { // 防止用户狂点,加个函数节流
this.stoplunbo()
if (!this.jieliu) {
this.jieliu = setTimeout(() => {
this.lunboIndex--
this.btnNum--
if (this.lunboIndex === -1) {
this.lunboIndex = 3
this.btnNum = 3
}
this.jieliu = null
this.runlunbo()
}, 200)
}
},
lunboAdd () { // 防止用户狂点,加个函数节流
this.stoplunbo()
if (!this.jieliu) {
this.jieliu = setTimeout(() => {
this.lunboIndex++
this.btnNum++
if (this.lunboIndex === 4) {
this.lunboIndex = 0
this.btnNum = 0
}
this.jieliu = null
this.runlunbo()
}, 200)
}
},
runlunbo () {
this.timer = setInterval(() => {
this.lunboIndex++
this.btnNum++
if (this.lunboIndex === 4) {
this.lunboIndex = 0
this.btnNum = 0
}
}, 3000)
}
},
components: {
},
mounted () {
this.runlunbo()
}
}
</script>
<style lang='less' scoped>
@import "../../assets/css/common.less";
.lunbo {
position: relative;
width: 100%;
height: 440px;
overflow: hidden;
img {
display: block;
width: 100%;
height: 440px;
position: absolute;
}
.allbtn {
position: absolute;
bottom: 20px;
left: calc(50% - 80px);
li {
width: 20px;
height: 20px;
margin-right: 20px;
background: #333;
float: left;
border-radius: 50%;
opacity: 0.8;
cursor: pointer;
}
.btncolor {
background: #fff;
}
}
.lunbobtn {
position: absolute;
width: 40px;
height: 80px;
font-size: 40px;
line-height: 70px;
color: #fff;
background: #333;
opacity: 0.5;
top: 180px;
text-align: center;
cursor: pointer;
}
.rightbtn {
right: 0;
}
.image-enter-active { // 过渡
// transform: translateX(0);
transition: all 0.5s ease;
}
.image-leave-active { // 过渡
// transform: translateX(-100%);
transition: all 0.5s ease;
}
.image-enter { // 开始进入动画的位置
transform: translateX(100%);
}
.image-leave-to { // 结束消失的位置
transform: translateX(-100%);
}
}
</style>
更多推荐
已为社区贡献8条内容
所有评论(0)