当前位置： 首页 > article >正文

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

article 2025/2/7 18:37:05

先来看效果

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

先来看一下页面代码结构

<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": "这是一串文字介绍"
	}
]


http://www.kler.cn/a/535392.html

相关文章：

  • 逻辑起源 - 比较DS与豆包对“逻辑”源头的提炼差异
  • 【吾爱出品】开源桌面组件：widgets
  • Deno vs Node.js：性能对比深度解析
  • [ Spring ] Spring Boot Mybatis++ 2025
  • 拍照对比，X70 PRO与X90 PRO+的细节差异
  • visual studio安装
  • OSPF基础（2）：数据包详解
  • 51单片机07 串口通信
  • 【C语言】常量指针和指针常量，指针数组和数组指针，指针函数和函数指针怎么区分？
  • vue2-nextTick
  • JAVA面试框架篇
  • 注册中心不知选哪个？Zookeeper、Eureka、Nacos、Consul和Etcd 5种全方位剖析对比
  • Python利用VideoCapture和FFmpeg读取多个rtsp流性能的比较
  • idea整合deepseek实现AI辅助编程
  • 【React】表单校验：从基础到集成库
  • Chapter 4-1. Troubleshooting Congestion in Fibre Channel Fabrics
  • π0开源了且推出自回归版π0-FAST——打造机器人动作专用的高效Tokenizer：比扩散π0的训练速度快5倍但效果相当
  • 2025_1_31 C语言中关于数组和指针
  • CentOS 7.9-2207更换实时内核
  • 【2025最新计算机毕业设计】基于SSM的智能停车场管理系统【提供源码+答辩PPT+文档+项目部署】（高质量源码，可定制，提供文档，免费部署到本地）
  • 使用 cipher /w 清除磁盘删除残留数据(Windows) - 随笔
  • Android版Kotlin版RxJava2+Retrofit2+OkHttp3的基础、封装和项目中的使用
  • 【工具篇】ChatGPT：开启人工智能新纪元
  • React 打印插件 -- react-to-print
  • C++中的pair，pair和map的结合
  • 接口对象封装思想及实现-笔记