先来看效果点击下方按钮可以做到平滑切换轮播轮播图片可以根据自定义随心变化。先来看一下页面代码结构div classcontainer div classlunbo-wrap div idslide /div div classbuttons div classs_buttonlt;/div div classs_buttongt;/div /div /div /div在这段代码中#slide的地方用于存放轮播图片和图片上的文字介绍可以直接写成纯静态的卡片也可以使用JS动态读取数据动态生成卡片完整的轮播结构应该如下纯静态卡片可以按照下面的代码直接用对于按钮来说可以自己选择喜欢的按钮放在这里就行调整切换按钮位置从CSS处调整即可div classcontainer div classlunbo-wrap div idslide div classitem stylebackground-image: url(quot;img/photo1.jpgquot;); div classcontent div classname图片1/div div classdes这是一串文字介绍/div /div /div div classitem stylebackground-image: url(quot;img/photo2.jpgquot;); div classcontent div classname图片2/div div classdes这是一串文字介绍/div /div /div div classitem stylebackground-image: url(quot;img/photo3.jpgquot;); div classcontent div classname图片3/div div classdes这是一串文字介绍/div /div /div div classitem stylebackground-image: url(quot;img/photo4.jpgquot;); div classcontent div classname图片4/div div classdes这是一串文字介绍/div /div /div div classitem stylebackground-image: url(quot;img/photo5.jpgquot;); div classcontent div classname图片5/div div classdes这是一串文字介绍/div /div /div div classitem stylebackground-image: url(quot;img/photo6.jpgquot;); div classcontent div classname图片6/div div classdes这是一串文字介绍/div /div /div /div div classbuttons div classs_buttonlt;/div div classs_buttongt;/div /div /div /div如果需要动态的添加卡片则可以使用如下的JS这里记得导入JQuery的文件$(document).ready(function() { $.getJSON(js/lunboJsonUp.json, function(data) { console.log(data:, data) const $slide $(#slide); // 渲染轮播图 data.forEach(item { const $item $(div classitem/div) .css(background-image, url(${item.image})) .append( $(div classcontent/div).append( $(div classname/div).text(item.photoName), $(div classdes/div).text(item.text), ) ); $slide.append($item); }); }); //下一张将所有带有 .item 类的第一个元素移动到 #slide 容器的末尾。 document.querySelectorAll(.s_button)[1].onclick () { let lists document.querySelectorAll(.item); document.querySelector(#slide).appendChild(lists[0]); } //上一张将所有带有 .item 类的最后一个元素移动到 #slide 容器的开头 document.querySelectorAll(.s_button)[0].onclick () { let lists document.querySelectorAll(.item); document.querySelector(#slide).prepend(lists[lists.length - 1]); } })上述代码实现动态卡片生成去主要部分还是在于点击按钮实现轮播的切换我们来看上一张的操作document.querySelectorAll(.s_button)[0].onclick () { let lists document.querySelectorAll(.item); document.querySelector(#slide).prepend(lists[lists.length - 1]); }document.querySelectorAll(.s_button)[0]选取所有带有.s_button类的元素并获取其中第一个元素索引为0。这通常对应于“上一张”按钮。.onclick () { ... }同样地为该按钮添加一个点击事件监听器。let lists document.querySelectorAll(.item)与“下一张”功能相同选择所有带有.item类的元素并将它们存储在变量lists中。document.querySelector(#slide).prepend(lists[lists.length - 1])找到ID为#slide的容器并将最后一个.item元素即lists[lists.length - 1]移动到该容器的开头。这样就实现了当前显示的最后一个项目被移到最前从而展示前一个项目。下一张同理document.querySelectorAll(.s_button)[1].onclick () { let lists document.querySelectorAll(.item); document.querySelector(#slide).appendChild(lists[0]); }document.querySelectorAll(.s_button)[1]选取所有带有.s_button类的元素并获取其中第二个元素索引为1。这通常对应于“下一张”按钮。.onclick () { ... }为该按钮添加一个点击事件监听器当用户点击这个按钮时执行箭头函数中的代码块。let lists document.querySelectorAll(.item)选择所有带有.item类的元素并将它们存储在变量lists中。这些元素代表轮播图中的各个项目。document.querySelector(#slide).appendChild(lists[0])找到ID为#slide的容器并将第一个.item元素即lists[0]移动到该容器的末尾。这样就实现了当前显示的第一个项目被移到最后从而展示下一个项目。对于这样效果的轮播主要还是在于轮播图样式的定义下面是CSS完整代码/* 重置所有元素的默认 margin 和 padding */ * { margin: 0; padding: 0; } /* 轮播图容器样式 */ .lunbo-wrap { width: 1200px; /* 设置轮播图容器的宽度为1200px */ height: 500px; /* 设置轮播图容器的高度为500px */ position: absolute; /* 使用绝对定位 */ top: 42%; /* 将顶部边缘设置为视口高度的42% */ left: 50%; /* 将左侧边缘设置为视口宽度的50% */ transform: translate(-50%, -50%); /* 使用平移变换使容器居中 */ background-color: #f5f5f5; /* 设置背景颜色为浅灰色 */ padding: 50px; /* 设置内边距为50px */ box-shadow: 0 30px 50px #dbdbdb; /* 添加阴影效果 */ } /* 轮播图滑块样式 */ #slide { width: max-content; /* 设置滑块的宽度为最大内容宽度 */ } /* 每个轮播项的通用样式 */ .item { width: 200px; /* 设置每个轮播项的宽度为200px */ height: 300px; /* 设置每个轮播项的高度为300px */ background-position: 50%, 50%; /* 设置背景图片的位置 */ display: inline-block; /* 使每个轮播项显示为行内块级元素 */ background-size: cover; /* 使背景图片覆盖整个轮播项 */ position: absolute; /* 使用绝对定位 */ top: 60%; /* 设置顶部距离为60% */ transform: translateY(-50%); /* 使用平移变换使轮播项垂直居中 */ border-radius: 20px; /* 设置圆角半径 */ box-shadow: 0 30px 50px #505050; /* 添加阴影效果 */ transition: 0.5s; /* 设置过渡效果持续时间为0.5秒 */ } /* 第一个和第二个轮播项的特殊样式 */ .item:nth-child(1), .item:nth-child(2) { top: 0; /* 设置顶部距离为0 */ left: 0; /* 设置左侧距离为0 */ width: 100%; /* 设置宽度为100% */ height: 100%; /* 设置高度为100% */ transform: translateY(0); /* 取消垂直居中 */ border-radius: 0; /* 取消圆角 */ box-shadow: none; /* 取消阴影 */ } /* 第三个轮播项的特殊位置 */ .item:nth-child(3) { left: 65%; /* 设置左侧距离为65% */ } /* 第四个轮播项的特殊位置 */ .item:nth-child(4) { left: calc(65% 220px); /* 计算左侧距离 */ } /* 第五个轮播项的特殊位置 */ .item:nth-child(5) { left: calc(65% 440px); /* 计算左侧距离 */ } /* 第六个轮播项的特殊位置 */ .item:nth-child(6) { left: calc(65% 660px); /* 计算左侧距离 */ opacity: 0; /* 设置透明度为0 */ } /* 轮播项中的内容样式 */ .item .content { width: 300px; /* 设置内容宽度 */ position: absolute; /* 使用绝对定位 */ left: 100px; /* 设置左侧距离 */ top: 50%; /* 设置顶部距离 */ transform: translateY(-50%); /* 使用平移变换使内容垂直居中 */ font-family: system-ui; /* 设置字体 */ color: black; /* 设置字体颜色 */ display: none; /* 默认隐藏内容 */ } /* 第二个轮播项的内容默认显示 */ .item:nth-child(2) .content { display: block; /* 显示内容 */ } /* 轮播项中的名称样式 */ .item .name { font-size: 40px; /* 设置字体大小 */ font-weight: bold; /* 设置字体加粗 */ opacity: 0; /* 初始透明度为0 */ animation: showcontent 1s ease-in-out 1 forwards; /* 定义动画效果 */ } /* 轮播项中的描述样式 */ .item .des { margin: 20px 0; /* 设置上下外边距 */ opacity: 0; /* 初始透明度为0 */ animation: showcontent 1s ease-in-out 0.3s 1 forwards; /* 延迟0.3秒后显示 */ } /* 轮播项中的按钮样式 */ .item button { padding: 10px 20px; /* 设置内边距 */ border: none; /* 取消边框 */ opacity: 0; /* 初始透明度为0 */ animation: showcontent 1s ease-in-out 0.6s 1 forwards; /* 延迟0.6秒后显示 */ } /* 定义动画效果这里主要是对于图片上文字部分的动画 */ keyframes showcontent { from { opacity: 0; /* 初始透明度为0 */ transform: translateY(100px); /* 向下移动100px */ filter: blur(20px); /* 初始模糊效果 */ } to { opacity: 1; /* 最终透明度为1 */ transform: translateY(0); /* 不再移动 */ filter: blur(0); /* 取消模糊效果 */ } } /* 控制按钮容器样式 */ .buttons { width: 100%; /* 设置宽度为100% */ position: absolute; /* 使用绝对定位 */ bottom: 50px; /* 设置底部距离 */ margin-left: -50px; /* 设置左侧外边距 */ text-align: center; /* 文本居中 */ border: none; /* 取消边框 */ } /* 单个控制按钮样式 */ .s_button { display: inline-block; /* 行内块级元素 */ border: none; /* 取消边框 */ width: 50px; /* 设置宽度 */ height: 50px; /* 设置高度 */ line-height: 50px; /* 设置行高 */ text-align: center; /* 文本居中 */ color: gray; /* 设置字体颜色 */ font-size: 25px; /* 设置字体大小 */ border-radius: 50%; /* 设置圆形 */ font-weight: bold; /* 设置字体加粗 */ border: 1px solid #555; /* 设置边框 */ margin: 0 25px; /* 设置外边距 */ transition: 0.5s; /* 设置过渡效果 */ } /* 鼠标悬停时的控制按钮样式 */ .s_button:hover { cursor: pointer; /* 更改鼠标指针 */ background-color: #ccc; /* 设置背景颜色 */ }这里附上json文件有需要的可以参考这个json来定义数据格式[{ image: img/photo1.jpg, photoName: 图片1, text: 这是一串文字介绍 }, { image: img/photo2.jpg, photoName: 图片2, text: 这是一串文字介绍 }, { image: img/photo3.jpg, photoName: 图片3, text: 这是一串文字介绍 }, { image: img/photo4.jpg, photoName: 图片4, text: 这是一串文字介绍 }, { image: img/photo5.jpg, photoName: 图片5, text: 这是一串文字介绍 }, { image: img/photo6.jpg, photoName: 图片6, text: 这是一串文字介绍 } ]