5月24日采用了水平切换动画，并且实现了平滑循环切换 https://www.bilibili.com/video/bv1hY4y1676g
5月23日数组内直接放图片路径即可无需设置每个图片id了，同时采用循环输出指示标这样就可以根据图片数量动态生成了
5月22日重新优化了下，加入了指示标，同时采用了`$dispatch`来调用定时器重置函数！
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,user-scalable=no,viewport-fit=cover,initial-scale=1">
<link rel="dns-prefetch" href="//cdn.staticfile.org" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex justify-center items-center min-h-screen w-full overflow-y-hidden bg-black">
<div class="w-full sm:w-6/12 relative overflow-x-hidden shadow-md rounded"
x-data="{ activeSlide: 1 , lunbos: [
{ img: './1.png' },
{ img: './2.png' },
{ img: './3.png' },
],last : null}"
x-init="last=activeSlide;$next=$refs.next;$flag=setInterval('$next.click()',3000);"
@resetting="clearInterval($flag);$flag=setInterval('$next.click()',3000);">
<!--循环输出图片-->
<div class="relative min-w-full flex" :class="{'transition-transform':last!=activeSlide}"
:style="`transform: translateX(${(activeSlide) * -100}%)`"
@transitionend="if(activeSlide>lunbos.length){activeSlide=1;}if(activeSlide<1){activeSlide=lunbos.length;}"
x-effect="if(activeSlide==0){last=lunbos.length}if(activeSlide==lunbos.length+1){last=1}if(1<activeSlide&&activeSlide<lunbos.length){last=-1}"
><!--
当播放序号activeSlide为0时将last变量定义为数组长度3，然后activeSlide变为3，此时activeSlide与last相等故不显示切换动画
当播放序号activeSlide为4时将last变量定义为数组长度1，然后activeSlide变为1，此时activeSlide与last相等故不显示切换动画
activeSlide在大于1小于数组长度3时，将last设置为-1，此时显示切换动画
-->
<template x-for="(lunbo,index) in [lunbos[lunbos.length -1], ...lunbos, lunbos[0]]" :key="index">
<img class="flex-shrink-0 w-full object-center object-cover" :src="lunbo.img">
</template>
</div>
<div class="absolute top-0 bottom-0 text-white flex justify-between w-full">
<!--上一个-->
<button class="hover:text-sky-500 px-2" @click="activeSlide = activeSlide === 0 ? lunbos.length+1 : activeSlide - 1;$dispatch('resetting')"><svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 17l-5-5m0 0l5-5m-5 5h12"></path>
</svg></button>
<!--下一个-->
<button class="hover:text-sky-500 px-2" @click="activeSlide = activeSlide === lunbos.length+1 ? 1 : activeSlide + 1;$dispatch('resetting')" x-ref="next"><svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</svg></button>
</div>
<!--循环输出指示标-->
<div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
<template x-for="(lunbo,index) in lunbos" :key="index">
<button @click="last=-1;activeSlide=index+1 ;$dispatch('resetting')" :class="{'opacity-60':activeSlide!=index+1 }" class="w-7 bg-gray-300 bg-clip-content h-1 mx-0.5 box-content border-transparent border-y-8"></button>
</template>
</div>
<!--
<div class="flex flex-col text-white w-full"><span x-text="activeSlide"></span> / <span x-text="last"></span></div>
调试用-->
</div>
<script src="https://cdn.staticfile.org/alpinejs/3.9.6/cdn.min.js" defer></script>
</body>
</html>
提供