首先看圖，是不是你想要的結果（錄製動畫，把時間調快了）
代碼：（vue.js、圖片自己找）
vue官網：https://cn.vuejs.org/v2/guide/installation.html
或：直接引入vue.js：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img{
width: 100%;
height: 100%;
position: absolute;
}
.imgItems{
position: relative;
width: 800px;
height: 400px;
margin: auto;
}
/*圓圈居中水平排列*/
.imgIndexs{
display: flex;
justify-content: space-between;
position: absolute;
left: 360px;
bottom: 5px;
width: 80px;
}
/*圖片所對應的圓圈*/
.imgIndex{
width: 8px;
height: 8px;
border: 1px solid #EEEEEE;
border-radius: 50%;
background-color: #EEEEEE;
z-index: 100;
}
/*設置層級，顯示圖片*/
.indexZ{
z-index: 10;
}
/*選中對應的圓圈設置背景顏色*/
.indexBGC{
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<div class="imgItems" @mouseover="mouseOver" @mouseout="mouseOut">
<img src="img1.png" alt="" class="img indexZ">
<img src="img2.jpg" alt="" class="img">
<img src="img3.jpg" alt="" class="img">
<img src="img4.jpg" alt="" class="img">
<img src="img5.jpg" alt="" class="img">
<div class="imgIndexs">
<div class="imgIndex" v-for="(item,index) in imgCount"
@mouseover="indexBtn(index)" :class="{indexBGC:currentIndex == index}">
</div>
</div>
</div>
</div>
<script src="../vuejs/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
imgCount:0, //圖片個數
currentIndex:0, //當前圖片
intervalID:'', //停止interval的唯一id
},
mounted(){
this.imgCount = document.getElementsByTagName("img").length;
setTimeout(()=>{
// 開始播放
this.startTime();
},10)
},
methods:{
/**
* 鼠標移動到圖片上
*/
mouseOver(){
this.stopTime()
},
/**
* 鼠標移出圖片
*/
mouseOut(){
this.startTime();
},
/**
* 點擊圓圈
*/
indexBtn(index){
this.currentIndex = index
this.selectImg(index);
},
/**
* 選中對應的圖片設置層級類
*/
selectImg(index){
let imgList = document.getElementsByClassName("img");
this.clearClass(imgList);
imgList[index].className = "img indexZ"
},
/**
* 層級復位
*/
clearClass(array){
for (let i=0 ; i<array.length ; i++){
array[i].className = "img"
}
},
/**
* 開始循環播放圖片
*/
startTime(){
this.intervalID = window.setInterval(()=>{
this.currentIndex++;
if(this.currentIndex > 4){
this.currentIndex = 0
}
this.selectImg(this.currentIndex)
},1000)
},
/**
* 鼠標移到圖片上時停止圖片播放
*/
stopTime(){
window.clearInterval(this.intervalID)
}
}
})
</script>
</body>
</html>