Vue写个简单轮播图
步骤
1.html框架
2.css样式显示页面
3.new Vue()实现功能
功能实现
主要是功能实现，CSS+Html应该都会
1.本文实现轮播图，先解决两边点击按键，绑定点击事件进行判断，将默认false变成true
2.下方小按钮通过双向绑定获取id，将找到的id值赋给索引，利用索引找到图片
3.移入移出事件设置定时器，防止抖动需要删除定时器
4.在生命周期初始化时利用钩子函数created()实现自动轮播
主要代码
new Vue({
el: '#app',
data: {
index: 0,
time: 0,
imgList: [{
id: 1,
active: true ,
image: "https://image.photocnc.com/aoaodcom/2018-09/03/201809030926107249.jpg.h700.webp"
},
{
id: 2,
active: false,
image: "https://image.photocnc.com/aoaodcom/2018-09/03/201809030926159544.jpg.h700.webp"
},
{
id: 3,
active: false,
image: "https://image.photocnc.com/aoaodcom/2018-09/03/201809030926223593.jpg.h700.webp"
},
{
id: 4,
active: false,
image: "https://image.photocnc.com/aoaodcom/2018-09/05/201809050609197770.jpg.h700.webp"
},
{
id: 5,
active: false,
image: "https://image.photocnc.com/aoaodcom/2018-09/05/201809050609135028.jpg.h700.webp"
}
],
},
methods: {
//右点击事件
rightC() {
this.index++
this.demo()
},
//左点击事件
leftC() {
this.index--
this.demo()
},
//寻找id点击事件
findC(id){
this.index = this.imgList.findIndex(item=>item.id===id)
this.demo()
},
//整合demo封装
demo() {
//判断左边最小到哪
if (this.index < 0) {
this.index = this.imgList.length-1
}
//判断右边最大到哪
if (this.index === this.imgList.length) {
this.index = 0
}
//调用数组方法遍历图片列表全部变为false
this.imgList.forEach(item => item.active = false)
//将获取的下标编程true
this.imgList[this.index].active = true
},
//移出动
auto() {
//防止抖动bug，直接调用删除定时器
this.stop()
this.time = setInterval(() => this.rightC(), 1000)
},
//移入停
stop() {
clearInterval(this.time)
},
},
//钩子函数自动轮播
created() {
this.auto()
},
})
CSS样式
/* css样式 */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
.box {
width: 1000px;
height: 400px;
margin: 100px auto;
border: 1px solid #000;
position: relative;
}
.box ul li {
display: none;
}
.box ul li.active {
display: block;
}
.box ul li a img {
width: 1000px;
height: 400px;
}
.box ol {
height: 20px;
/* 这个文本居中方法是我所没有想到的 */
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 40px;
border-radius: 10px;
}
.box ol li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
float: left;
margin: 5px;
}
.box ol li.active {
background-color: #f00;
}
.box>a {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: #fff;
background-color: rgba(0, 0, 0, .7);
}
.box>a.left {
left: 0;
}
.box>a.right {
right: 0;
}
.box:hover {
cursor: pointer;
}
html样式
<div id="app">
<!-- 移入移出事件 -->
<div class="box" @mouseout="auto" @mouseover='stop'>
<ul>
<!-- 点击事件 -->
<li v-for='item in imgList' :key='item.id' :class="{active:item.active}">
<a href="#">
<img :src="item.image" alt="">
</a>
</li>
</ul>
<ol>
<!-- 点击事件 -->
<li v-for='item in imgList' :key='item.id' :class="{active:item.active}" @click='findC(item.id)'></li>
</ol>
<!-- 点击事件，prevent阻止默认事件-->
<a href="" class="left" @click.prevent='leftC'><</a>
<a href="" class="right" @click.prevent='rightC'>></a>
</div>
</div>
