所用方法和思想跟上面原文一样，就是增加了样式，以及记录如何修改里面的属性。
实现原理：
图片滑动即margin-left或者left的改变（和图片滑动方向有关），
点击切换即点击相应按钮，跳转到相关图片（数值判断）
<template>
<div id="lunbo">
<div
class="lunbo"
:style="{
transition:slide+'s',
marginLeft:-screen*num +'px'
}"
>
<img v-for="(item,index) in miaosha" :key="index" :src="item.icon" alt />
</div>
<div class="buttons">
<div
class="button"
v-for="(item,index) in button"
:key="index"
:class="{active:buttonVis(index)
}"
@click="changeImg(index)"
></div>
<!-- 此处将button的值传过去用于判断是否给button添加active的class属性值，从而改变按钮的颜色 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
miaosha: [
{
num: 0,
icon: require("../../assets/images/project/1.png")
},
{
num: 1,
icon: require("../../assets/images/project/1.png")
},
{
num: 2,
icon: require("../../assets/images/project/1.png")
},
{
num: 3,
icon: require("../../assets/images/project/1.png")
}
],
button: [0, 1, 2, 3],
//切换图片的时间
slide: 1,
//图片的个数
num: 0,
//定时器的名称
timer: null,
//屏幕的尺寸
screen: null,
//定时器每张图停留的时间
min: 3000
};
},
methods: {
//此处用于切换图片时按钮颜色的高亮
buttonVis(index) {
if (index == this.num) {
return true;
} else {
return false;
}
},
//点击按钮切换图片时，让num等于当前按钮的index值 num改变，图片也随之改变
//此处让slide=0是为了点击瞬间切换，而不是倒退轮播图
changeImg(index) {
this.num = index;
this.slide = 0;
},
//此方法主要用于判断图片轮播的距离
get() {
//获取屏幕的宽度，以实现随着页面的改变，图片滑动的距离改变
this.screen = document.body.clientWidth * 0.4;
if (this.num == 3) {
this.slide = 0;
//当滑动到第四章图片时，切换的时间为0s，这样不会出现轮播倒滑的效果
this.num = 0;
} else {
this.slide = 1;
this.num++;
// console.log(this.num)
}
}
},
mounted() {
this.timer = setInterval(this.get, this.min);
},
//关闭页面之前摧毁定时器
beforeDestroy() {
clearInterval(this.timer);
// this.timer = null
}
};
</script>
<style scoped>
/*最顶层的容器，宽度只能够显示一张图片*/
/* width设置轮播图的大小 */
#lunbo {
width: 40%;
overflow: hidden;
text-align: center;
position: relative;
border-radius: 1rem;
margin: 0 auto;
}
/*轮播图所在容器，宽度为父容器的四倍，这里设置了4张轮播图，轮播图滑动时，一个两秒的滑动特效*/
/* 有几张轮播图宽度设置多少倍 */
.lunbo {
width: 400%;
transition: 2s;
background-color: #fff;
}
/* 图片的宽度=1除以轮播图的张数 */
.lunbo img {
width: 25%;
}
.buttons {
position: absolute;
left: 50%;
top: 90%;
transform: translate(-50%, -50%);
display: flex;
}
.button {
display: inline-block;
margin-left: 10px;
width: 20px;
height: 4px;
border-radius: 2px;
background-color: white;
}
.active {
background-color: red;
}
</style>
比如你有几张轮播修改的点（六点）
</script>标签里面
1、data中的miaosha数组里面加入你想插入图片的序号和相对地址
2、data中的button: [0, 1, 2, 3]中设置相对应的数组，有几张图片从零到几写上去
3、get()方法中
this.screen = document.body.clientWidth * 0.4;0.4替换成下面css中定义的的父盒子的width
if (this.num == 3)3替换成轮播图片数 - 1<style>标签里面
1、父盒子width设置大小，和上面获取屏幕宽度对应
/*最顶层的容器，宽度只能够显示一张图片*/
/* width设置轮播图的大小，越大越大 */
#lunbo {
width: 40%;
overflow: hidden;
text-align: center;
position: relative;
border-radius: 1rem;
margin: 0 auto;
}
2、子盒子 width设置大小，有几张轮播图宽度设置多少倍
/*轮播图所在容器，宽度为父容器的四倍，这里设置了4张轮播图，轮播图滑动时，一个两秒的滑动特效*/
/* 有几张轮播图宽度设置多少倍 */
.lunbo {
width: 400%;
transition: 2s;
background-color: #fff;
}
3、设置图片大小=1/轮播图的张数
/* 图片的宽度=1除以轮播图的张数 */
.lunbo img {
width: 25%;
}
