您的位置：首页 > Web前端 > Vue.js

使用vue+transition实现简单的轮播图效果

2019-07-24 10:05 495 查看

效果图

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#app {
width: 500px;
height: 200px;
margin: 0 auto;
position: relative;
overflow: hidden;

}

ul li {
list-style: none;

}

.item_body {
width: 1500px;
padding: 0;
/* display: flex; */
transition: transform .4s;
}

.item {

width: 500px;
height: 200px;
float: left;
text-align: center;
line-height: 200px;
}

.btns {
z-index: 1;
position: absolute;
left: 50%;
bottom: 0px;
margin-left: -45px;
padding: 0;
}

.btn {
width: 10px;
height: 10px;
background-color: gray;
border-radius: 50%;
float: left;
margin: 10px;

}

.active {
background-color: blue;
}

.right,
.left {
position: absolute;
width: 20px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #eee55e;
color: gray;
top: 50%;
margin-top: -20px;
cursor: pointer;
}

.left {
left: 5px;
}

.right {
right: 5px;
}
</style>
</head>

<body>
<div id="app">
<ul class="item_body" :style="{transform:'translate('+-mark*500+'px,0)'}" v-on:mouseover="stop()"
v-on:mouseout="play()">
<li class="item" v-for="(item,index) in items" :key="index" :style="{background:item.backgroundColor}">
{{item.backgroundColor}}
</li>
</ul>
<ul class="btns">
<li :class="['btn',{'active':index===mark}]" v-for="(item,index) in items" :key="index"
@click='move(index)'>
</li>
</ul>
<div class="right" v-on:click='moveR'>&gt;</div>
<div class="left" @click="moveL">&lt;</div>
</div>
<script src="../js/vue.js"></script>

<script>
const app = new Vue({
el: "#app",
data: {
timer: null,
mark: 0,
items: [
{
backgroundColor: 'red',

},
{
backgroundColor: 'green',

},
{
backgroundColor: 'orangered',

}
],

},
methods: {
autoplay() {
this.mark++;
if (this.mark > 2) {
this.mark = 0;
}
},
play() {
this.timer = setInterval(this.autoplay, 3000)
},
stop() {
clearInterval(this.timer)
},
// 点击小圆点
move(index) {
console.log(index);
console.log(this);

this.mark = index

},
// 右点
moveR() {
// console.log(this.index);
this.mark++;
console.log(this.mark);

if (this.mark > 2) {
this.mark = 0;
}
},
// 左点
moveL() {
this.mark--;
if (this.mark < 0) {
this.mark = 2;
}
}

}
})

</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航