H5+CSS+JS制作好看的轮播图

先来看效果

点击下方按钮可以做到平滑切换轮播，轮播图片可以根据自定义随心变化。

先来看一下页面代码结构

<div class="container"><div class="lunbo-wrap"><div id="slide"></div><div class="buttons"><div class="s_button">&lt;</div><div class="s_button">&gt;</div></div></div>
</div>

         在这段代码中，#slide的地方用于存放轮播图片和图片上的文字介绍，可以直接写成纯静态的卡片，也可以使用JS动态读取数据，动态生成卡片，完整的轮播结构应该如下（纯静态卡片可以按照下面的代码直接用），对于按钮来说，可以自己选择喜欢的按钮放在这里就行，调整切换按钮位置从CSS处调整即可

<div class="container"><div class="lunbo-wrap"><div id="slide"><div class="item" style="background-image: url(&quot;img/photo1.jpg&quot;);"><div class="content"><div class="name">图片1</div><div class="des">这是一串文字介绍</div></div></div><div class="item" style="background-image: url(&quot;img/photo2.jpg&quot;);"><div class="content"><div class="name">图片2</div><div class="des">这是一串文字介绍</div></div></div><div class="item" style="background-image: url(&quot;img/photo3.jpg&quot;);"><div class="content"><div class="name">图片3</div><div class="des">这是一串文字介绍</div></div></div><div class="item" style="background-image: url(&quot;img/photo4.jpg&quot;);"><div class="content"><div class="name">图片4</div><div class="des">这是一串文字介绍</div></div></div><div class="item" style="background-image: url(&quot;img/photo5.jpg&quot;);"><div class="content"><div class="name">图片5</div><div class="des">这是一串文字介绍</div></div></div><div class="item" style="background-image: url(&quot;img/photo6.jpg&quot;);"><div class="content"><div class="name">图片6</div><div class="des">这是一串文字介绍</div></div></div></div><div class="buttons"><div class="s_button">&lt;</div><div class="s_button">&gt;</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 class="item"></div>').css('background-image', `url(${item.image})`).append($('<div class="content"></div>').append($('<div class="name"></div>').text(item.photoName),$('<div class="des"></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": "这是一串文字介绍"}
]