对应的<teemplate> 

<template><div class="box"><ul class="ul1" ref="ul1"><li v-for="(img, idx) in images" :key="idx" :style="{ zIndex: img.zIndex }"><img :src="img.src" :width="img.width" :height="img.height"></li></ul><div class="left-botton indexs" id="left-botton" @click="moveLeft">&lt;</div><div class="right-botton indexs" id="right-botton" @click="moveRight">&gt;</div><ul class="ul2 indexs" ref="ul2"><li v-for="(button, idx) in buttons" :key="idx":style="{ backgroundColor: button.backgroundColor, color: button.color }"@click="jumpTo(idx)"><img :src="button.imgSrc" :alt="button.alt"></li></ul></div></template>

轮播图引入方式，我查阅资料，试了很多种方法，包括require引入等等，都发现不行，于是自己试出一种方法 

<script>import img86 from '../image/img86.jpg';/*先定义一个变量再将变量引入*/import img87 from '../image/img87.jpg';import img88 from '../image/img88.jpg';import img89 from '../image/img89.jpg';import img92 from '../image/img92.png';export default {data() {return {images: [{ src: img86, width: 1520, height: 800, zIndex: 0 },{ src: img87, width: 1520, height: 800, zIndex: 0 },{ src: img88, width: 1520, height: 800, zIndex: 0 },{ src: img89, width: 1520, height: 800, zIndex: 100 }],buttons: [{ backgroundColor: '#fff', color: '#000', imgSrc: img92, alt: '祥云' },{ backgroundColor: '#fff', color: '#000', imgSrc: img92, alt: '祥云' },{ backgroundColor: '#fff', color: '#000', imgSrc: img92, alt: '祥云' },{ backgroundColor: 'red', color: '#fff', imgSrc: img92, alt: '祥云' }],index: 0,timer: null};},mounted() {this.startInterval();},methods: {startInterval() {this.timer = setInterval(() => {this.index = (this.index + 1) % this.images.length;this.updateSlide(this.index);}, 2000);},moveLeft() {clearInterval(this.timer);this.index = (this.index - 1 + this.images.length) % this.images.length;this.updateSlide(this.index);this.startInterval();},moveRight() {clearInterval(this.timer);this.index = (this.index + 1) % this.images.length;this.updateSlide(this.index);this.startInterval();},jumpTo(idx) {clearInterval(this.timer);this.index = idx;this.updateSlide(this.index);this.startInterval();},updateSlide(index) {this.images.forEach((img, idx) => {img.zIndex = idx === index ? 100 : 0;});this.buttons.forEach((button, idx) => {button.backgroundColor = idx === index ? 'red' : '#fff';button.color = idx === index ? '#fff' : '#000';});}}};</script>

对应的css

<style scoped>
*{font-size: 12px;
}
ul{margin: 0;padding: 0;list-style: none;
}.box{width: 1520px;height: 800px;position: relative;border: 1px red solid;}
.ul1{width: 100%;height: 100%;
}
.ul1>li{position: absolute;
}
.left-botton{position: absolute;width: 35px;height: 70px;background-color: #00000050;color: #ccc;top:195px;border-radius:0 5px 5px 0;text-align: center;line-height: 70px;font-size: 27px;
}.left-botton:hover{background-color: #00000050;color: #fff;}  
.right-botton{position: absolute;width: 35px;height: 70px;background-color: #00000050;color: #ccc;top:195px;border-radius:0 5px 5px 0;text-align: center;line-height: 70px;font-size: 27px;right: 0;
}.right-botton:hover{background-color: #00000050;color: #fff;}
.ul2{position: absolute;bottom: 20px;right: 100px;
}.ul2>li {width: 20px;height: 20px;background-color: #fff;text-align: center;line-height: 20px;border-radius: 100%;float: left;margin-right: 10px;padding: 5px; /* 调整祥云图案与背景之间的间距 */
}.ul2>li img {width: 100%; /* 设置祥云图案的宽度为父元素的100% */height: 100%; /* 设置祥云图案的高度为父元素的100% */
}.ul2>li:hover{background-color: #00000050;color: #fff;		
}
.ul2>li:nth-child(1){background-color: #00000050;color: #fff;		
}
.ul2>li:nth-child(1){z-index: 100;
}
.indexs{z-index: 1000;
}
</scoped>

等我后续再补充实现思路和讲解