所用方法和思想跟上面原文一樣，就是增加了樣式灼伤，以及記錄如何修改里面的屬性榆纽。
實(shí)現(xiàn)原理：
圖片滑動(dòng)即margin-left或者left的改變（和圖片滑動(dòng)方向有關(guān)）善茎，
點(diǎn)擊切換即點(diǎn)擊相應(yīng)按鈕，跳轉(zhuǎn)到相關(guān)圖片（數(shù)值判斷）
<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],
//切換圖片的時(shí)間
slide: 1,
//圖片的個(gè)數(shù)
num: 0,
//定時(shí)器的名稱
timer: null,
//屏幕的尺寸
screen: null,
//定時(shí)器每張圖停留的時(shí)間
min: 3000
};
},
methods: {
//此處用于切換圖片時(shí)按鈕顏色的高亮
buttonVis(index) {
if (index == this.num) {
return true;
} else {
return false;
}
},
//點(diǎn)擊按鈕切換圖片時(shí)市咽，讓num等于當(dāng)前按鈕的index值 num改變，圖片也隨之改變
//此處讓slide=0是為了點(diǎn)擊瞬間切換抵蚊，而不是倒退輪播圖
changeImg(index) {
this.num = index;
this.slide = 0;
},
//此方法主要用于判斷圖片輪播的距離
get() {
//獲取屏幕的寬度施绎，以實(shí)現(xiàn)隨著頁面的改變，圖片滑動(dòng)的距離改變
this.screen = document.body.clientWidth * 0.4;
if (this.num == 3) {
this.slide = 0;
//當(dāng)滑動(dòng)到第四章圖片時(shí)贞绳，切換的時(shí)間為0s谷醉，這樣不會出現(xiàn)輪播倒滑的效果
this.num = 0;
} else {
this.slide = 1;
this.num++;
// console.log(this.num)
}
}
},
mounted() {
this.timer = setInterval(this.get, this.min);
},
//關(guān)閉頁面之前摧毀定時(shí)器
beforeDestroy() {
clearInterval(this.timer);
// this.timer = null
}
};
</script>
<style scoped>
/*最頂層的容器，寬度只能夠顯示一張圖片*/
/* width設(shè)置輪播圖的大小 */
#lunbo {
width: 40%;
overflow: hidden;
text-align: center;
position: relative;
border-radius: 1rem;
margin: 0 auto;
}
/*輪播圖所在容器冈闭，寬度為父容器的四倍俱尼，這里設(shè)置了4張輪播圖，輪播圖滑動(dòng)時(shí)萎攒，一個(gè)兩秒的滑動(dòng)特效*/
/* 有幾張輪播圖寬度設(shè)置多少倍 */
.lunbo {
width: 400%;
transition: 2s;
background-color: #fff;
}
/* 圖片的寬度=1除以輪播圖的張數(shù) */
.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>
比如你有幾張輪播修改的點(diǎn)（六點(diǎn)）
</script>標(biāo)簽里面
1遇八、data中的miaosha數(shù)組里面加入你想插入圖片的序號和相對地址
2矛绘、data中的button: [0, 1, 2, 3]中設(shè)置相對應(yīng)的數(shù)組，有幾張圖片從零到幾寫上去
3刃永、get()方法中
this.screen = document.body.clientWidth * 0.4;0.4替換成下面css中定義的的父盒子的width
if (this.num == 3)3替換成輪播圖片數(shù) - 1<style>標(biāo)簽里面
1货矮、父盒子width設(shè)置大小，和上面獲取屏幕寬度對應(yīng)
/*最頂層的容器斯够，寬度只能夠顯示一張圖片*/
/* width設(shè)置輪播圖的大小囚玫，越大越大 */
#lunbo {
width: 40%;
overflow: hidden;
text-align: center;
position: relative;
border-radius: 1rem;
margin: 0 auto;
}
2、子盒子 width設(shè)置大小读规，有幾張輪播圖寬度設(shè)置多少倍
/*輪播圖所在容器抓督，寬度為父容器的四倍，這里設(shè)置了4張輪播圖掖桦，輪播圖滑動(dòng)時(shí)本昏，一個(gè)兩秒的滑動(dòng)特效*/
/* 有幾張輪播圖寬度設(shè)置多少倍 */
.lunbo {
width: 400%;
transition: 2s;
background-color: #fff;
}
3、設(shè)置圖片大小=1/輪播圖的張數(shù)
/* 圖片的寬度=1除以輪播圖的張數(shù) */
.lunbo img {
width: 25%;
}
