基于Vue实现左右滑动轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./bower_components/vue/dist/vue.js"></script>
<style>
.img-wrap {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
img {
width: 500px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.left-btn {
position: absolute;
left: 20px;
top: 140px;
z-index: 99;
}
.right-btn {
position: absolute;
right: 20px;
top: 140px;
z-index: 99;
}
.slide-left-enter-active,
.slide-left-leave-active {
transition: all 2s ease;
}
.slide-left-enter {
transform: translateX(500px);
}
.slide-left-leave-to {
transform: translateX(-500px);
}
.slide-right-enter-active,
.slide-right-leave-active {
transition: all 2s ease;
}
.slide-right-enter {
transform: translateX(-500px);
}
.slide-right-leave-to {
transform: translateX(500px);
}
.
title-wrap {
js实现轮播图最简代码width: 500px;
height: 50px;
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
line-height: 50px;
}
.dot-wrap {
float: right;
}
i {
display: inline-block;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 0 5px;
}
.active {
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<div class="img-wrap" @mouseover="mouseOver" @mouseleave="mouseLeave">            <button class="left-btn" @click="leftSlide"> left </button>
<button class="right-btn" @click="rightSlide"> right </button>
<template v-for="(item,index) in img">
<transition :name="transitionName">
<img :src="item.pic" alt="" v-show="index==current">
</transition>
</template>
<div class="title-wrap">
<template v-for="(item,index) in img">
<span v-show="index==current">{{item.title}}</span>
</template>
<div class="dot-wrap">
<template v-for="(item,index) in img">
<i :class="{'active':index==current}" @click="curr(index)"></i>
</template>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
img: [
{ pic: 'img/1.jpg', title: 'img1' },
{ pic: 'img/1.jpg', title: 'img1' },
{ pic: 'img/2.jpg', title: 'img2' },
{ pic: 'img/3.jpg', title: 'img3' },
{ pic: 'img/4.jpg', title: 'img4' },
{ pic: 'img/5.jpg', title: 'img5' }
],
transitionName: 'slide-left',
current: 0, //当前展⽰的下标
autoTimer: null //⾃动轮播定时器
},
computed: {
maxIndex() {
return this.img.length - 1;
}
},
methods: {
leftSlide() {
if (this.current == 0) {
this.current = 5;
} else {
this.current--
}
},
rightSlide() {
if (this.current == this.maxIndex) {
this.current = 0;
} else {
this.current++
}
},
curr(index) {
this.current = index;
},
mouseOver() {
clearInterval(this.autoTimer);
},
mouseLeave() {
this.timer();
},
timer() {
let that = this;
this.autoTimer = setInterval(function () {                        ansitionName = 'slide-right'
if (that.current == that.maxIndex) {                            that.current = 0;
} else {
that.current++
}
}, 2000)
}
},
mounted() {
this.timer()
},
})
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。