*注意*:项目使用的是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>