JS的DOM操作和事件监听综合练习 （具备三种功能的轮播图案例）
下面是是对dom操作的一个综合练习
下面代码是html的基本骨架（没有任何的功能）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片自动切换（轮播图效果）</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.carousel-container {
position: relative;
width: 25%;
height: 40%; /* 根据需要设置高度 */
border: 4px red solid;
background-color: gray;
}
.carousel-image {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="carousel-container">
<img src="./img_src/p1.jpg" class="carousel-image" id="img1">
</div>
<div class="change-image">
<p class="button" id="p1">第1张</p>
<p class="button" id="p2">第2张</p>
<p class="button" id="p3">第3张</p>
<p class="button" id="p4">第4张</p>
</div>
<script>
</script>
</body>
</html>
运行截图：
第一种功能是让4张图片实现自动轮播
一共可以有两种方式可以实现让它自动轮播的效果：
第一种：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片自动切换（轮播图效果）</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.carousel-container {
position: relative;
width: 25%;
height: 40%; /* 根据需要设置高度 */
border: 4px red solid;
background-color: gray;
}
.carousel-container .carousel-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1; /* 不透明度0-1 */
}
</style>
</head>
<body>
<div class="carousel-container">
<img src="./img_src/p1.jpg" class="carousel-image" id="img1">
</div>
<div class="clear_ele change-image">
<p class="button" id="p1">第1张</p>
<p class="button" id="p2">第2张</p>
<p class="button" id="p3">第3张</p>
<p class="button" id="p4">第4张</p>
</div>
<script>
// 【实现自动轮播】
const imgElement = document.getElementById("img1");
var i = 1;
// 修改img标签的图片路径
function showNextImage1() {
if(i>4){
i = 1;
}else{
imgElement.src = `./img_src/p${i}.jpg`;
i = i + 1;
}
}
// 每1秒切换一次图片 （无限循环）
setInterval(showNextImage1, 1500);
</script>
</body>
</html>
第二种（把上面红色代码替换就行）：
//【实现自动轮播】直接改整个父节点下节点（innerHTML实现）
const divElement = document.getElementsByClassName("carousel-container")[0];
var i = 1;
function showNextImage2() {
if(i>4){
i = 1;
}else{
divElement.innerHTML = `<img src="./img_src/p${i}.jpg" class="carousel-image active" id="img1">`
i = i + 1;
}
}
运行截图（因作者个人技术原因，上传不去录屏，用截图代替）：
第二种功能是实现四个按钮切换图片，以下为该功能代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片自动切换（轮播图效果）</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.carousel-container {
position: relative;
width: 25%;
height: 40%; /* 根据需要设置高度 */
border: 4px red solid;
background-color: gray;
}
.carousel-container .carousel-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1; /* 不透明度0-1 */
}
.change-image{
width: 15%;
height: 3%;
/* border: 1px purple solid; */
position: absolute;
top: 30%;
left: 5%;
}
.change-image .button{
width: 60px;
height: 30px;
color: white;
text-align: center;
background-color: red;
border-radius: 10px;
margin-left: 9px;
float: left;
}
.clear_ele::after{
content: ""; /* 这个伪元素的内容属性必须有 */
display: block;
/* border: 6px purple dashed; */
clear: both;
}
</style>
</head>
<body>
<div class="carousel-container">
<img src="./img_src/p1.jpg" class="carousel-image" id="img1">
</div>
<div class="clear_ele change-image">
<p class="button" id="p1">第1张</p>
<p class="button" id="p2">第2张</p>
<p class="button" id="p3">第3张</p>
<p class="button" id="p4">第4张</p>
</div>
<script>
// 【实现自动轮播】
const imgElement = document.getElementById("img1");
var i = 1;
// 修改img标签的图片路径
function showNextImage1() {
if(i>4){
i = 1;
}else{
imgElement.src = `./img_src/p${i}.jpg`;
i = i + 1;
}
}
// 每1秒切换一次图片 （无限循环）
setInterval(showNextImage1, 1500);
// 【实现四个按钮切换图片】
const p = document.getElementsByTagName("p");
p[0].addEventListener("click",
function(){
i = 1;
imgElement.src = `./img_src/p${i}.jpg`;
}
)
p[1].addEventListener("click",
function(){
i = 2;
imgElement.src = `./img_src/p${i}.jpg`;
}
)
p[2].addEventListener("click",
function(){
i = 3;
imgElement.src = `./img_src/p${i}.jpg`;
}
)
p[3].addEventListener("click",
function(){
i = 4;
imgElement.src = `./img_src/p${i}.jpg`;
}
)
</script>
</body>
</html>
运行结果（点想看的张数可直接跳转到第几张）：
第三种功能是实现回车键控制轮播，以下为该功能代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片自动切换（轮播图效果）</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.carousel-container {
position: relative;
width: 25%;
height: 40%; /* 根据需要设置高度 */
border: 4px red solid;
background-color: gray;
}
.carousel-container .carousel-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1; /* 不透明度0-1 */
}
.change-image{
width: 15%;
height: 3%;
/* border: 1px purple solid; */
position: absolute;
top: 30%;
left: 5%;
}
.change-image .button{
width: 60px;
height: 30px;
color: white;
text-align: center;
background-color: red;
border-radius: 10px;
margin-left: 9px;
float: left;
}
#output {
color: white;
background-color: red;
text-align: center;
width: 15%;
height: 3%;
margin-top: 1%;
position: relative;
left: 5%;
border-radius: 10px;
}
.clear_ele::after{
content: ""; /* 这个伪元素的内容属性必须有 */
display: block;
/* border: 6px purple dashed; */
clear: both;
}
</style>
</head>
<body>
<div class="carousel-container">
<img src="./img_src/p1.jpg" class="carousel-image" id="img1">
</div>
<div class="clear_ele change-image">
<p class="button" id="p1">第1张</p>
<p class="button" id="p2">第2张</p>
<p class="button" id="p3">第3张</p>
<p class="button" id="p4">第4张</p>
</div>
<div id="output">图片轮播关闭......(按Enter键开启轮播)</div>
<script>
// 【实现自动轮播】
const imgElement = document.getElementById("img1");
var i = 1;
var scroll_img = false;
function showNextImage1() {
if(scroll_img){
if(i>4){
i = 1;
}else{
imgElement.src = `./img_src/p${i}.jpg`;
i = i + 1;
}
}
}
// 每1秒切换一次图片 （无限循环）
setInterval(showNextImage1, 1500);
// 【实现四个按钮切换图片】
const p = document.getElementsByTagName("p");
p[0].addEventListener("click",
function(){
i = 1;
imgElement.src = `./img_src/p${i}.jpg`;
}
)
p[1].addEventListener("click",
function(){
i = 2;
imgElement.src = `./img_src/p${i}.jpg`;
}
)
p[2].addEventListener("click",
function(){
i = 3;
imgElement.src = `./img_src/p${i}.jpg`;
}
)
p[3].addEventListener("click",
function(){
i = 4;
imgElement.src = `./img_src/p${i}.jpg`;
}
)
// 【实现回车键控制轮播是否开启】
// 获取显示按键信息的元素
const outputDiv = document.getElementById('output');
// 监听整个文档的keydown事件
document.addEventListener('keydown',
function(event) {
// 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）
const keyCode = event.key;
if(keyCode==="Enter"){
scroll_img = !scroll_img;
}
//将提示信息添加到输出区域
if (scroll_img) {
outputDiv.textContent = "图片轮播开启......(按Enter键关闭轮播)";
outputDiv.style.backgroundColor = "green";
} else {
outputDiv.textContent = "图片轮播关闭......(按Enter键开启轮播)";
outputDiv.style.backgroundColor = "red";
}
}
);
</script>
</body>
</html>
运行结果（未按回车键版）：
运行结果（已按回车键版）：
（注：若有疑问，可发评论，作者看到会回复）
相关文章：
JS的DOM操作和事件监听综合练习 （具备三种功能的轮播图案例）
下面是是对dom操作的一个综合练习 下面代码是html的基本骨架（没有任何的功能）： <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" c…...
低温存储开关机问题
问题： 某消费电子产品在进行可靠性实验室，在低温-30C存储两个小时后，上电不开机。在常温25C时，开关机正常。 分析： 1、接串口抓log信息，从打印信息可以看出uboot可以起来，在跑kernel时&#x…...
mysql系列1—mysql架构和协议介绍
背景： 本文开始整理mysql相关的文章，用于收集数据库相关内容；包括mysql架构和存储方式、索引结构和查询优化、数据库锁等内容。思考如何根据具体的业务给出最优的分表规划和表设计、字段选择和索引设计、优化的SQL语句，以及数据库…...
设计模式——模板模式
定义与基本概念 模板模式（Template Pattern）是一种行为设计模式。它在一个抽象类中定义了一个操作的算法骨架，将一些步骤的实现延迟到具体子类中。这个抽象类就像是一个模板，定义了执行某个流程的基本框架，而具体的细…...
CV22_语义分割基础
1. 常见的分割类型 在计算机视觉领域，根据不同的应用场景和需求，分割任务可以分为几种主要类型。以下是几种常见的分割类型： 语义分割（Semantic Segmentation）： 语义分割的目标是将图像中的每个像素分配到…...
Dubbo源码解析-Dubbo的线程模型（九）
一、Dubbo线程模型 首先明确一个基本概念：IO 线程和业务线程的区别 IO 线程：配置在netty 连接点的用于处理网络数据的线程，主要处理编解码等直接与网络数据 打交道的事件。 业务线程：用于处理具体业务逻辑的线程，可以…...
【Canvas与标志】圆角三角形生化危险警示标志
【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>圆角三角形生化危险警示标志 Draft1</title><style type&qu…...
)
解决Dcat Admin laravel框架登录报错问题，(blocked:mixed-content)
前言 在使用 Dcat Admin 后台登录时，发生 error 报错：(blocked:mixed-content) xhr VM484:1，浏览器拦截 其实这是浏览器在 HTTPS 页面中尝试加载 HTTP 资源，导致浏览器阻止了这些不安全的请求。 解决 在 .env 文件中添加或修改 AD…...
（三）Sping Boot学习——升级jdk1.8-jdk18
1.修改系统环境变量。 2.idea中修改配置。 3.项目setting中设置修改 4.更新后还要重新下载依赖mvn clean install ，并且记住reload 项目。同时查看java -version查看一下jdk版本。...
语言模型中的多模态链式推理
神经网络的公式推导 简介摘要引言多模态思维链推理的挑战多模态CoT框架多模态CoT模型架构细节编码模块融合模块解码模块 实验结果运行代码补充细节安装包下载Flan-T5数据集准备rougenltkall-MiniLM-L6-v2运行 简介 本文主要对2023一篇论文《Multimodal Chain-of-Thought Reason…...
SCons：下一代构建工具，如何用 Python 驱动高效构建？
在现代软件开发中，构建工具是开发流程中不可或缺的一环。无论是小型项目还是跨平台的复杂工程，选择一个高效、灵活的工具都能显著提高开发效率和代码质量。SCons，一个以 Python 为基础的构建工具，通过自动化依赖管理、灵活的扩展性…...
springboot 整合 rabbitMQ (延迟队列)
前言： 延迟队列是一个内部有序的数据结构，其主要功能体现在其延时特性上。这种队列存储的元素都设定了特定的处理时间，意味着它们需要在规定的时间点或者延迟之后才能被取出并进行相应的处理。简而言之，延时队列被设计用于存放那…...
ES 基本使用与二次封装
概述 基本了解 Elasticsearch 是一个开源的分布式搜索和分析引擎，基于 Apache Lucene 构建。它提供了对海量数据的快速全文搜索、结构化搜索和分析功能，是目前流行的大数据处理工具之一。主要特点即高效搜索、分布式存储、拓展性强 核心功能 全文搜索:…...
分割一切2.0，SAM2详解
🏡作者主页：点击！ 🤖编程探索专栏：点击！ ⏰️创作时间：2024年11月24日20点03分 神秘男子影, 秘而不宣藏。 泣意深不见, 男子自持重, 子夜独自沉。 论文链接 点击开启你的论文编程之旅…...
Spring AI Fluent API：与AI模型通信的流畅体验
引言 随着人工智能（AI）技术的飞速发展，越来越多的应用场景开始融入AI技术以提升用户体验和系统效率。在Java开发中，与AI模型通信成为了一个重要而常见的需求。为了满足这一需求，Spring AI引入了ChatClient，…...
基于python的长津湖评论数据分析与可视化，使用是svm情感分析建模
引言 研究背景及意义 上世纪初开始，中国电影就以自己独有的姿态登上了世界电影史的舞台。中国电影作为国家文化和思想观念的反映与延伸，能够增强文化自信，在文化输出方面有着极其重要的作用1[1]。 改革开放以来，随着生产力的提高…...
Lucene(2):Springboot整合全文检索引擎TermInSetQuery应用实例附源码
前言 本章代码已分享至Gitee: https://gitee.com/lengcz/springbootlucene01 接上文。Lucene(1):Springboot整合全文检索引擎Lucene常规入门附源码 如何在指定范围内查询。从lucene 7 开始，filter 被弃用，导致无法进行调节过滤。 TermInSetQuery 指定…...
shell完结
声明！ 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&a…...
【2024最新】基于Springboot+Vue的智慧食堂系统Lw+PPT
作者：计算机搬砖家 开发技术：SpringBoot、php、Python、小程序、SSM、Vue、MySQL、JSP、ElementUI等，“文末源码”。 专栏推荐：SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏：Java精选实战项…...
NVR小程序接入平台EasyNVR多品牌NVR管理工具：高效管理分散视频资源的解决方案
在当今数字化、智能化的时代背景下，视频监控已成为各行各业不可或缺的一部分，从公共安全到企业运维，再到智慧城市建设，视频资源的管理与应用正面临着前所未有的挑战。如何高效整合、管理这些遍布各地的分散视频资源，成…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。 具体可参…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
BLEU评分：机器翻译质量评估的黄金标准
BLEU评分：机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域，衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标，自2002年由IBM的Kishore Papineni等人提出以来，…...
算术操作符与类型转换：从基础到精通
目录 前言：从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符：、-、*、/、% 赋值操作符：和复合赋值 单⽬操作符：、--、、- 前言：从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...
Redis上篇--知识点总结
Redis上篇–解析 本文大部分知识整理自网上，在正文结束后都会附上参考地址。如果想要深入或者详细学习可以通过文末链接跳转学习。 1. 基本介绍 Redis 是一个开源的、高性能的 内存键值数据库，Redis 的键值对中的 key 就是字符串对象，而 val…...
背包问题双雄：01 背包与完全背包详解（Java 实现）
一、背包问题概述 背包问题是动态规划领域的经典问题，其核心在于如何在有限容量的背包中选择物品，使得总价值最大化。根据物品选择规则的不同，主要分为两类： 01 背包：每件物品最多选 1 次（选或不选&#…...
[特殊字符] Spring Boot底层原理深度解析与高级面试题精析
一、Spring Boot底层原理详解 Spring Boot的核心设计哲学是约定优于配置和自动装配，通过简化传统Spring应用的初始化和配置流程，显著提升开发效率。其底层原理可拆解为以下核心机制： 自动装配（Auto-Configuration） 核…...