这里主要分为三个部分，两个从左到右的箭头，一个点序列，一个图片序列，它们的布局都是使用绝对定位，通过z-index来确定它们的级联关系。预先定义图片的宽高为css变量，方便计算每个元素的高和宽#box{position:relative;宽度：var(--图像宽度);高度：var(--height);溢出：隐藏；}#multi-circles{位置：绝对；右：30px；底部：10px；z-指数：2；}#multi-images{位置：绝对；左：0；顶部：0；z-索引：1；宽度：calc(var(--imageWidth)*5);高度：var(--height);}#arrow-right,#arrow-left{位置：绝对；顶部：50%；边距顶部：-20px；高度：40px；z-指数：3；对{对：0;}#arrow-left{左：0;}判断图片的序号为了实现轮播，我们需要知道现在应该展示的是哪张图片。在js中定义变量currentIndex，表示当前显示图片的序号。初始值为0，当点击箭头或鼠标移动到该点时，改变序号即可。//先进行dom操作，获取html组件vararrowLeft=document.getElementById("arrow-left");vararrowRight=文档。getElementById("arrow-right");varmultiImages=document.getElementById("多图像");varcircles=document.getElementById("multi-circles").getElementsByTagName("li");varbox=document.getElementById（“盒子”）;//箭头和点的绑定事件arrowLeft.addEventListener("click",preMove);arrowRight.addEventListener("click",nextMove);for(leti=0;i的默认样式圆点左边有个小圆点，去掉这个样式。ul,li{list-style:none;}完整代码代码地址：https://github.com/ssevenk/Ca...