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管理工具：高效管理分散视频资源的解决方案
在当今数字化、智能化的时代背景下，视频监控已成为各行各业不可或缺的一部分，从公共安全到企业运维，再到智慧城市建设，视频资源的管理与应用正面临着前所未有的挑战。如何高效整合、管理这些遍布各地的分散视频资源，成…...
排序算法(三)--插入排序
文章目录 一、插入排序的基本原理二、插入排序的C语言实现三、代码解析 插入排序 C语言实例 一、插入排序的基本原理 插入排序的基本思想是将数组中的元素逐一取出，然后将其插入到已经排好序的部分中的适当位置，直到整个数组排序完成。具体步骤如下&…...
YOLOv11融合[ECCV 2018]RCAN中的RCAB模块及相关改进思路
YOLOv11v10v8使用教程： YOLOv11入门到入土使用教程 YOLOv11改进汇总贴：YOLOv11及自研模型更新汇总 《Image Super-Resolution Using Very Deep Residual Channel Attention Networks》 一、 模块介绍 论文链接：https://arxiv.org/abs/1807…...
排序(Java数据结构)
1. 排序的概念及引用 1.1 排序的概念 排序：所谓排序，就是使一串记录，按照其中的某个或某些关键字的大小，递增或递减的排列起来的操作。(所有的排序都是默认从小到大排序) 稳定性：假定在待排序的记录序列中ÿ…...
【Java 解释器模式】实现高扩展性的医学专家诊断规则引擎
🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，…...
【超详细】卷积神经网络CNN基本架构以及工作原理详解
《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...
Html前后端Ajax交互数据前端JavaScript脚本后台C#ashx服务
本示例使用设备：https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.52de2c1bU8Fdbo&ftt&id615391857885 前端以GET模式向后台请求数据 function MyGetAjax() {var xhr new XMLHttpRequest();xhr.open(GET, http://192.168.1.211/HttpReader.ash…...
问：Spring Boot应用监控组件工具，梳理一下？
在日常运维与开发过程中，Spring Boot 应用的监控是确保系统稳定性和性能的关键环节。本文将探讨 Spring Boot 常用的监控组件及工具的原理、适用场景，并针对不同场景下的运维监控方案进行介绍。 1. Spring Boot Actuator 原理： Spring Boo…...
利用Hooka开源的多种功能shellcode加载器实现快速免杀火绒，静态360+360杀毒，微步查杀1，vt查杀7(教程)
免责声明: 本文旨在提供有关特定漏洞的深入信息，帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步，未经授权访问系统、网络或应用程序，可能会导致法律责任或严重后果。因此，作者不对读者基于…...
2025-2026财年美国CISA国际战略规划（下）
文章目录 前言四、加强综合网络防御（一）与合作伙伴共同实施网络防御，降低集体风险推动措施有效性衡量 （二）大规模推动标准和安全，以提高网络安全推动措施有效性衡量 （三）提高主要合作…...
iframe通过url方式来获传递的参数
iframe通过url方式来获传递的参数 一、src"http://xxxx/#/policyOverview?codeaaaa"二、 src"/static/iframePhone/html/main.html?codeaaaa" 一、src“http://xxxx/#/policyOverview?codeaaaa” <iframedata-v-47a50536""src"http:/…...