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管理工具：高效管理分散视频资源的解决方案
在当今数字化、智能化的时代背景下，视频监控已成为各行各业不可或缺的一部分，从公共安全到企业运维，再到智慧城市建设，视频资源的管理与应用正面临着前所未有的挑战。如何高效整合、管理这些遍布各地的分散视频资源，成…...
ESP-IDF嵌入式类型工具：轻量级字节与位操作库
1. 项目概述 esp_type_utils 是面向 ESP-IDF 生态的轻量级类型工具组件，专为嵌入式底层开发中高频出现的字节级数据操作与字符串格式化需求而设计。它并非 ESP-IDF 官方 SDK 的一部分，而是由开发者 Eric Gionet（K0I05）维护的开源…...
英飞凌TC3xx SMU模块实战：如何配置看门狗超时自动复位（附寄存器详解）
英飞凌TC3xx SMU模块实战：如何配置看门狗超时自动复位（附寄存器详解） 在汽车电子和工业控制领域，系统稳定性是生死攸关的指标。想象一下，当你的ECU在高速公路上以120km/h运行时突然死机，或者工业机器人正在…...
小米测试开发面试全解析：从理论到实战
1. 小米测试开发面试全流程解析 第一次参加小米测试开发面试的朋友可能会有点懵，不知道从哪开始准备。作为一个经历过完整面试流程的"过来人"，我来分享一下我的真实经历。小米的测试开发面试一般分为2-3轮，每轮侧重点不同ÿ…...
埃拉托斯特尼筛法（埃氏筛）完整解析
一、算法用途 快速找出 2 ~ n 之间的所有素数。 暴力判断每个数：O(nn) 埃氏筛：O(nloglogn)，接近线性，极快。 二、核心思想 先假设所有数都是素数。 从最小素数 2 开始，把它的所有倍数标记为合数。 取下一个没被标记的数（一定是素数），继续标记它的倍数。 最后没被标记…...
MCP只是过渡，CLI才是AI的原生界面——从飞书、钉钉集体CLI化说起
文章目录一、从"养龙虾"说起：一场返祖式的革命二、MCP：伟大的"USB-C"，但依然是个翻译器三、CLI：AI的母语，不需要翻译四、MCPCLI：过渡方案与终极形态的共生五、对开发者的冷思考&#x…...
智能车越野组硬件拆解：我们如何用CYT4BB7核心板与四硅麦矩阵搞定声音信标定位？
智能车越野组硬件拆解：四硅麦矩阵与CYT4BB7核心板的声学定位实战 全国大学生智能车竞赛越野组的硬件设计，本质上是一场关于精度、效率和可靠性的极限挑战。当其他队伍还在为三硅麦方案的布线发愁时，我们已经用四硅麦矩阵将声音信标定位误差控…...
DLSS Swapper革新性图形优化工具：一键提升游戏帧率最高达40%的开源解决方案
DLSS Swapper革新性图形优化工具：一键提升游戏帧率最高达40%的开源解决方案 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper DLSS Swapper是一款开源的图形优化工具，专为游戏玩家打造，…...
Oni-Duplicity：轻松定制《缺氧》游戏体验，告别资源与角色困扰
Oni-Duplicity：轻松定制《缺氧》游戏体验，告别资源与角色困扰 【免费下载链接】oni-duplicity A web-hosted, locally-running save editor for Oxygen Not Included. 项目地址: https://gitcode.com/gh_mirrors/on/oni-duplicity 你是否曾在《缺…...
告别996！我用Qoder AI编程平台，一天搞定全栈电商项目（附保姆级实战流程）
从零到上线：Qoder AI全栈电商项目实战手记 凌晨三点的显示器蓝光里，我第17次调试购物车接口时，咖啡杯底黏着的便签写着"再熬三天就能交付"。这个典型的程序员996场景，在上个月使用Qoder开发新电商平台时被彻底颠覆——从…...
多智能体AI交易系统技术落地实践：从架构设计到生产部署
多智能体AI交易系统技术落地实践：从架构设计到生产部署 【免费下载链接】TradingAgents-CN 基于多智能体LLM的中文金融交易框架 - TradingAgents中文增强版 项目地址: https://gitcode.com/GitHub_Trending/tr/TradingAgents-CN 在金融科技快速发展的今天&am…...