vue3制作轮播图+vue轮播图的图片引入方式

对应的<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>

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