vue实现banner切换 (tailwindcss)

*注意*:项目使用的是Tailwindcss

<template>
  <div class="w-screen h-screen fixed top-0 flex items-center justify-center">
    <!-- banner区域 -->
    <div
      class="w-[700px] h-1/2 bg-red-500 rounded-xl group relative overflow-hidden"
    >
      <!-- 箭头区域 -->
      <div
      @click="onClickLeft"
      class="size-10 bg-black/50 rounded-xl cursor-pointer scale-0 group-hover:scale-100 flex items-center justify-center absolute left-2 top-1/2 z-50"
    >
      <svg
        width="20"
        height="20"
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M5.79889 24H41.7989"
          stroke="#fff"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M17.7988 36L5.79883 24L17.7988 12"
          stroke="#fff"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <!-- right -->
    <div
      @click="onClickRight"
      class="size-10 bg-black/50 rounded-xl cursor-pointer scale-0 group-hover:scale-100 flex items-center justify-center absolute right-2 top-1/2 z-50"
    >
      <svg
        width="20"
        height="20"
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M41.9999 24H5.99994"
          stroke="#fff"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M30 12L42 24L30 36"
          stroke="#fff"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
      <!-- 指示灯 -->
      <div
        class="absolute bottom-2 w-full h-4 flex items-center justify-center gap-1 z-50"
      >
        <div
        @click="onCirculeClick(index)"
        :class="active==index?'w-5 bg-red-600':'bg-white/50'"
          class="size-2  rounded-xl cursor-pointer transition-all ease-out"
          v-for="(i, index) in lists"
          :key="index"
        ></div>
      </div>

      <!-- 照片区域 -->
      <div class="absolute w-full h-full bg-emerald-300 flex transition-all ease-in-out" :style="`transform:translateX(${-active*700}px);`"  @click="imgLinkUrl()">
        <img
          class="w-full h-full rounded-xl"
          v-for="(i, index) in lists"
          :key="index"
          :src="i.coverUrl"
          alt=""
        />
        
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
setInterval(() => {
  onClickRight()
}, 3000);

const active = ref(0);
const lists = ref([
  {
    coverUrl:
      "https://img.zcool.cn/community/011aad554be56f000001bf72c38864.jpg@1280w_1l_2o_100sh.jpg",
    linkUrl: "",
  },
  {
    coverUrl:
      "https://i1.3conline.com/images/piclib/200912/28/batch/1/50775/1261981340895sbzeca5ic3.jpg",
    linkUrl: "https://www.baidu.com",
  },
  {
    coverUrl:
      "https://img.zcool.cn/community/011b97586354e5a801219c77a283b0.jpg@1280w_1l_2o_100sh.jpg",
    linkUrl: "",
  },
]);
const onClickLeft = () => {
  if (active.value <= 0) {
    active.value=lists.value.length-1
  } else {
    active.value--;
  }
};
const onClickRight = () => {
  if (active.value > lists.value.length-2) {
    active.value=0
  } else {
    active.value++;
  }
};
const onCirculeClick=(index)=>{
  active.value=index
}
const imgLinkUrl=()=>{
  var a = lists.value[active.value].linkUrl
  if(a.length<=0){
    console.log("空的");
  }else{
    window.open(a);
  }
}
</script>