vue书写轮播图
<template>
<div >
<div class="carousel-wrap" id="carousel">
<transition-group tag="ul" class='slide-ul' name="list">
<li v-for="(list,index) in arrList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
<img :src="list.src">
</li>
</transition-group>
<div class="carousel-items" v-if="arrList.length>1">
<span v-for="(item,index) in arrList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
</div>
<img src="../../static/images/right.png" v-if="arrList.length>1" alt="" @click="toRight" class="buttonRighr">
<img src="../../static/images/right.png" v-if="arrList.length>1" alt="" @click="toLeft" class="buttonLeft">
</div>
</div>
</template>
<script >
export default {
name:'bs-carousel',
props: {
arrList: {
type: Array,
default: [] //默认值
},
},
data() {
return {
currentIndex: 0,
timer: ''
}
},
created() {
console.log(this.arrList)
this.$nextTick(() => {
this.timer = setInterval(() => {
if(this.arrList.length >1){
this.autoPlay()
}
}, 4000)
})
},
components:{
},
mounted(){
},
methods:{
go() {
this.timer = setInterval(() => {
this.autoPlay()
}, 4000)
},
stop() {
clearInterval(this.timer)
this.timer = null
},
autoPlay() {
this.currentIndex++
if (this.currentIndex > this.arrList.length - 1) {
this.currentIndex = 0
}
},
toRight(){
this.currentIndex++
if (this.currentIndex > this.arrList.length - 1) {
this.currentIndex = 0
}
},
toLeft(){
this.currentIndex--
if (this.currentIndex < 0) {
this.currentIndex = this.arrList.length-1
}
}
},
computed: {
}
}
</script>
<style lang='scss' scoped>
.carousel-wrap {
position: relative;
height: 250px;
width: 100%;
overflow: hidden;
// 删除
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.buttonRighr{
width: 30px;
height: 30px;
position: absolute;
right: 0;
top: 100px;
// background: red;
}
.buttonLeft{
width: 30px;
height: 30px;
position: absolute;
left: 0;
top: 100px;
transform: rotate(180deg);
// background: red;
}
.slide-ul {
width: 100%;
height: 250px;
li {
position: absolute;
width: 100%;
height: 240px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 215px;
height: 215px;
}
}
}
.carousel-items {
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
margin: 0 auto;
text-align: center;
font-size: 0;
span {
display: inline-block;
height: 8px;
width: 8px;
border-radius: 50%;
margin: 0 3px;
background-color: #999;
cursor: pointer;
}
.active {
background-color: #666;
}
}
.list-enter-to {
transition: all 1s ease;
transform: translateX(0);
}
.list-leave-active {
transition: all 1s ease;
transform: translateX(-100%)
}
.list-enter {
transform: translateX(100%)
}
.list-leave {
transform: translateX(0)
}
.maglist{
display: flex;
align-items: center;
justify-content: center;
.imglist{
width: 215px;
height: 215px;
display: flex;
margin: 0 auto;
}
}
</style>
