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

news2025/3/16 6:33:00

先来看效果

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

先来看一下页面代码结构

<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.coloradmin.cn/o/2295901.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

表单与交互：HTML表单标签全面解析

表单与交互：HTML表单标签全面解析

目录 前言 一.HTML表单的基本结构 基本结构 示例 二.常用表单控件 文本输入框 选择控件 文件上传 按钮 综合案例 三.标签的作用 四.注意事项 前言 HTML&#xff08;超文本标记语言&#xff09;是构建网页的基础&#xff0c;其中表单&#xff08;<form>&…
阅读更多...
Python基础-元组tuple的学习

Python基础-元组tuple的学习

在 Python 中&#xff0c;元组&#xff08;tuple&#xff09;是一种不可变的序列类型&#xff0c;允许存储不同类型的元素。元组非常类似于列表&#xff08;list&#xff09;&#xff0c;但与列表不同的是&#xff0c;元组一旦创建&#xff0c;就不能修改其内容。 1 元组的创建…
阅读更多...
Vue与Konva：解锁Canvas绘图的无限可能

Vue与Konva：解锁Canvas绘图的无限可能

前言 在现代Web开发中&#xff0c;动态、交互式的图形界面已成为提升用户体验的关键要素。Vue.js&#xff0c;作为一款轻量级且高效的前端框架&#xff0c;凭借其响应式数据绑定和组件化开发模式&#xff0c;赢得了众多开发者的青睐。而当Vue.js邂逅Konva.js&#xff0c;两者结…
阅读更多...
go语言文件和目录

go语言文件和目录

打开和关闭文件 os.Open()函数能够打开一个文件&#xff0c;返回一个*File 和一个 err。操作完成文件对象以后一定要记得关闭文件。 package mainimport ("fmt""os" )func main() {// 只读方式打开当前目录下的 main.go 文件file, err : os.Open(".…
阅读更多...
Solidity09 Solidity构造函数和修饰器

Solidity09 Solidity构造函数和修饰器

文章目录 一、构造函数二、修饰器三、OpenZeppelin的Ownable标准实现四、Remix 演示示例五、代码示例 这一讲&#xff0c;我们将用合约权限控制&#xff08; Ownable&#xff09;的例子介绍 Solidity语言中构造函数&#xff08; constructor&#xff09;和独有的修饰器&…
阅读更多...
使用wpa_supplicant和wpa_cli 扫描wifi热点及配网

使用wpa_supplicant和wpa_cli 扫描wifi热点及配网

一&#xff1a;简要说明 交叉编译wpa_supplicant工具后会有wpa_supplicant和wpa_cli两个程序生产&#xff0c;如果知道需要连接的wifi热点及密码的话不需要遍历及查询所有wifi热点的名字及信号强度等信息的话&#xff0c;使用wpa_supplicant即可&#xff0c;否则还需要使用wpa_…
阅读更多...
大模型应用与实战：专栏概要与内容目录

大模型应用与实战：专栏概要与内容目录

文章目录 大模型应用与实战&#x1f4da; 核心内容模块一、大模型推理与部署1.1 推理框架应用实践1.2 框架源码深度解析1.3 高并发部署优化1.4 国产化平台适配 二、Agent框架专题2.1 Langchain系列2.2 Qwen-Agent系列2.3 Dify应用实践2.4 框架对比与迁移 三、微调技术研究3.1 微…
阅读更多...
Arbess基础教程-创建流水线

Arbess基础教程-创建流水线

Arbess(谐音阿尔卑斯) 是一款开源免费的 CI/CD 工具&#xff0c;本文将介绍如何使用 Arbess 配置你的第一条流水线&#xff0c;以快速入门上手。 1. 创建流水线 根据不同需求来创建不同的流水线。 1.1 配置基本信息 配置流水线的基本信息&#xff0c;如分组&#xff0c;环境&…
阅读更多...
科普书《从一到无穷大》的科普知识推翻百年集论

科普书《从一到无穷大》的科普知识推翻百年集论

科普书《从一到无穷大》的科普知识推翻百年集论 黄小宁 “我们给两组无穷大数列中的各个数一一配对&#xff0c;如果最后这两组都一个不剩&#xff0c;这两组无穷大就是相等的&#xff1b;如果有一组还有些数没有配出去&#xff0c;这一组就比另一组大些&#xff0c;或者说强些…
阅读更多...
【键盘识别】实例分割

【键盘识别】实例分割

第一步 键盘检测 方案一 canny边缘检测 canny边缘检测检测结果不稳定，容易因为复杂背景或光线变换检测出其他目标。 如图是用canny边缘检测方法标出的检测出的边缘的四个红点。 参考的是这篇文章OpenCV实战之三 | 基于OpenCV实现图像校正_opencv 图像校正-CSDN博客 方案二…
阅读更多...
25/2/7 ＜机器人基础＞雅可比矩阵计算 雅可比伪逆

25/2/7 ＜机器人基础＞雅可比矩阵计算 雅可比伪逆

雅可比矩阵计算 雅可比矩阵的定义 假设我们有一个简单的两个关节的平面机器人臂&#xff0c;其末端执行器的位置可以表示为&#xff1a; 其中&#xff1a; L1​ 和 L2 是机器人臂的长度。θ1​ 和 θ2是关节的角度。 计算雅可比矩阵 雅可比矩阵 JJ 的定义是将关节速度与末…
阅读更多...
apisix的real-ip插件使用说明

apisix的real-ip插件使用说明

k8s集群入口一般都需要过负载均衡&#xff0c;然后再到apisix。 这时候如果后台业务需要获取客户端ip&#xff0c;可能拿到的是lb或者网关的内网ip。 这里一般要获取真实ip需要做几个处理。 1. 负载均衡上&#xff0c;一般支持配置获取真实ip参数&#xff0c;需要配置上。然…
阅读更多...
Python实现GO鹅优化算法优化支持向量机SVM分类模型项目实战

Python实现GO鹅优化算法优化支持向量机SVM分类模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景 随着信息技术的迅猛发展&#xff0c;数据量呈爆炸式增长&#xff0c;如何从海量的数据中提取有价值…
阅读更多...
我用AI做数据分析之数据清洗

我用AI做数据分析之数据清洗

我用AI做数据分析之数据清洗 AI与数据分析的融合效果怎样&#xff1f; 这里描述自己在使用AI进行数据分析&#xff08;数据清洗&#xff09;过程中的几个小故事&#xff1a; 1. 变量名的翻译 有一个项目是某医生自己收集的数据&#xff0c;变量名使用的是中文&#xff0c;分…
阅读更多...
备战蓝桥杯：双指针（滑动窗口）算法之逛花展

备战蓝桥杯：双指针（滑动窗口）算法之逛花展

P1638 逛画展 - 洛谷 | 计算机科学教育新生态 这道题我们只要用一个kind和一个mp[N]的数组就能解决了 我们的解法1就是暴力枚举&#xff0c;先固定2&#xff0c;从2开始找连续的满足所有种类的最短的子数组&#xff0c;然后固定5&#xff0c;3&#xff0c;1&#xff0c;3&…
阅读更多...
collabora online+nextcloud+mariadb在线文档协助

collabora online+nextcloud+mariadb在线文档协助

1、环境 龙蜥os 8.9 docker 2、安装docker dnf -y install dnf-plugins-core dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sed -i shttps://download.docker.comhttps://mirrors.tuna.tsinghua.edu.cn/docker-ce /etc/yum.repos.…
阅读更多...
深度学习中的Checkpoint是什么？

深度学习中的Checkpoint是什么？

诸神缄默不语-个人CSDN博文目录 文章目录 引言1. 什么是Checkpoint&#xff1f;2. 为什么需要Checkpoint&#xff1f;3. 如何使用Checkpoint&#xff1f;3.1 TensorFlow 中的 Checkpoint3.2 PyTorch 中的 Checkpoint3.3 transformers中的Checkpoint 4. 在 NLP 任务中的应用5. 总…
阅读更多...
用深度学习模型构建海洋动物图像分类保姆教程

用深度学习模型构建海洋动物图像分类保姆教程

使用深度学习模型构建深度学习海洋动物图像分类模型的完整步骤如下&#xff0c;分为关键阶段和详细操作说明&#xff1a; 1. 数据准备与预处理 1.1 数据集组织 按类别分文件夹存储图像&#xff0c;例如&#xff1a;dataset/train/class1/class2/...val/class1/class2/...test…
阅读更多...
npm无法加载文件 因为此系统禁止运行脚本

npm无法加载文件 因为此系统禁止运行脚本

安装nodejs后遇到问题&#xff1a; 在项目里【node -v】可以打印出来&#xff0c;【npm -v】打印不出来&#xff0c;显示npm无法加载文件 因为此系统禁止运行脚本。 但是在winr&#xff0c;cmd里【node -v】,【npm -v】都也可打印出来。 解决方法&#xff1a; cmd里可以打印出…
阅读更多...
知识库升级新思路：用生成式AI打造智能知识助手

知识库升级新思路：用生成式AI打造智能知识助手

在当今信息爆炸的时代&#xff0c;企业和组织面临着海量数据的处理和管理挑战。知识库管理系统&#xff08;Knowledge Base Management System, KBMS&#xff09;作为一种有效的信息管理工具&#xff0c;帮助企业存储、组织和检索知识。然而&#xff0c;传统的知识库系统往往依…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023