码迷,mamicode.com
首页 > 其他好文 > 详细

使用vue的v-show和transition制作一个简单轮播图

时间:2018-09-20 16:07:32      阅读:1211      评论:0      收藏:0      [点我收藏+]

标签:play   items   动画效果   rap   pos   href   osi   top   current   

<template>
<!--轮播图-->
<div class="carousel-wrap" id="carousel">
<transition-group tag="ul" class=‘slide-ul‘ :name="transitionName">
<li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
<a :href="list.clickUrl" rel="nofollow">
<img :src="list.image" :alt="list.desc">
</a>
</li>
</transition-group>
<div class="carousel-items">
<span v-for="(item,index) in slideList.length" :class="{‘active‘:index===currentIndex}" @click="change(index)"></span>
</div>
</div>
</template>

<script>
export default{
data () {
return{
slideList: [
{
"clickUrl": "#",
"desc": "nhwc",
"image": ""
},
{
"clickUrl": "#",
"desc": "hxrj",
"image": ""
},
{
"clickUrl": "#",
"desc": "rsdh",
"image": ""
}
],
currentIndex: 0,
timer: ‘‘,
transitionName: ‘list‘
}
},
mounted () {
this.$nextTick(() => {
this.timer = setInterval(() => {
this.autoPlay()
},3000)
})
},
methods: {
go() {
this.timer = setInterval(() => {
this.autoPlay()
},3000)
},
stop() {
clearInterval(this.timer)
this.timer = null
},
change(index) {
this.stop()
this.go()
if (this.currentIndex > index) {
this.transitionName = ‘back‘
}else if (this.currentIndex < index) {
this.transitionName = ‘list‘
}
this.currentIndex = index
},
autoPlay() {
this.currentIndex++
this.transitionName = ‘list‘
if (this.currentIndex > this.slideList.length - 1) {
this.currentIndex = 0
}
}
}
}
</script>

<style>
.carousel-wrap {
position: relative;
height: 453px;
width: 100%;
overflow: hidden;
background-color: #fff;
}
.slide-ul {
width: 100%;
height: 100%;
}
.slide-ul li {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;}
.slide-ul img {
width: 100%;
height: 100%;
}
.carousel-items {
position: absolute;
z-index: 10;
top: 380px;
width: 100%;
margin: 0 auto;
text-align: center;
font-size: 0;}
.carousel-items span {
display: inline-block;
height: 6px;
width: 30px;
margin: 0 3px;
background-color: #b2b2b2;
cursor: pointer;
}
.carousel-items .active {
background-color: #00bbdd;
}
/*动画效果向左进入,向左离开 100至0,0至-100*/
.list-enter-active {
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)
}
/*动画效果向右进入,向左离开 -100至0,100至0*/
.back-enter-active {
transition: all 1s ease;
transform: translateX(0)
}
.back-leave-active {
transition: all 1s ease;
transform: translateX(100%)
}
.back-enter {
transform: translateX(-100%)
}
.back-leave {
transform: translateX(0%)
}
</style>

使用vue的v-show和transition制作一个简单轮播图

标签:play   items   动画效果   rap   pos   href   osi   top   current   

原文地址:https://www.cnblogs.com/fairy62/p/9680749.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!