Vue简易轮播图

 图片定时轮播，左右换页，下标显示

vue简易轮播图

<script setup>
import { reactive, ref } from 'vue';
// 图片数据
let imgs = reactive([
  'src/assets/images/轮播图1.jpg',
  'src/assets/images/轮播图2.jpg',
  'src/assets/images/轮播图3.jpg',
  'src/assets/images/轮播图4.jpg',
  'src/assets/images/轮播图5.jpg'
])
// 定义初始序号
let timeIndex = ref(0)


//定时器
setInterval(function () {

  timeIndex.value++
  if (timeIndex.value == imgs.length) {
    timeIndex.value = 0
  }
  console.log(timeIndex)
}, 3000)


// 加1
let add = function () {

  this.timeIndex--
  if (this.timeIndex <= 0) {
    this.timeIndex = 4
  }
  console.log(timeIndex)
}
// 减一
let pre = function () {
  this.timeIndex++
  if (this.timeIndex >= 5) {
    this.timeIndex = 0
  }

  console.log(timeIndex)
}



let Bgcolor = ref("red")



</script>

<template>
  <div class="img_nav">
    <p :style="index == timeIndex ? { backgroundColor: Bgcolor } : { backgroundColor: 'rgb(206, 206, 206)' }"
      v-for="(item, index) in imgs.length  ">
    </p>

  </div>
  <div class="abc">
    <img :src="imgs[timeIndex]" alt="没有">
  </div>
  <div class="yuan">
    <div @click="add">&lt;</div>
    <div @click="pre">&gt;</div>
  </div>
</template>

<style scoped>
.img_nav {
  position: absolute;
  top: 350px;
  left: 400px;
}

.img_nav p {
  float: left;
  width: 30px;
  height: 5px;
  background-color: rgb(206, 206, 206);
  margin-left: 5px;
}

img {
  width: 950px;

}

.abc {
  overflow: hidden;
  height: 400px;
  width: 950px;
}

.yuan div {
  width: 40px;
  height: 40px;
  background-color: rgb(255, 255, 255, 0.6);
  border-radius: 50%;
  float: left;
  position: absolute;
  top: 180px;
  left: 20px;
  cursor: pointer;
  text-align: center;
  font-size: 26px;
  color: rgb(199, 0, 0);
}

.yuan div:hover {
  background-color: rgb(180, 188, 188, 0.6);
}

.yuan div:last-child {
  margin-left: 890px;
}
</style>