DOM操作和事件监听综合练习——轮播图
下面制作一个如下图所示的轮播图（按Enter键可以控制轮播的开启和关闭，或者点击按钮“第几张”即可跳转到第几张）：
下面是其HTML和CSS代码（还没有设置轮播）：
<!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>
下面开始制作轮播图，制作以上轮播图可分为三个步骤：
一、实现自动轮播
首先获取图片标签节点
const imgElement = document.getElementById("img1"); 然后设置一个布尔变量，定义一个函数，使用if条件语句，如果条件为true就运行代码实现轮播，修改img标签的图片路径
// 修改img标签的图片路径var i = 1;var scroll_img = true; //设置布尔变量function showNextImage1() { if(scroll_img){ //如果条件为true就运行代码实现轮播if(i>4){i = 1;}else{ imgElement.src = `./img_src/p${i}.jpg`;i = i + 1;} }} 最后使用定时函数每1秒切换一次图片 （无限循环）
setInterval(showNextImage1, 1000); // 每1秒切换一次图片 （无限循环）这样自动轮播就设置好啦！！
二、实现带鼠标单击切换
首先设置好按钮CSS样式，使其浮动起来，排布在图片上方（前面几张博客对浮动和清除浮动有详细讲解）
.carousel-container .carousel-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; /* 不透明度0-1 */ } .change-image{width: 20%; 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;}接下来获取每一个按钮标签节点，使用监听鼠标单击事件修改其图片路径，以实现四个按钮切换图片
// 【实现四个按钮切换图片】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`;})
这样带鼠标单击切换图片就做好啦！！
三、实现带键盘控制轮播开关
首先添加一个节点并输入提示文字，然后为它设置CSS样式
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片自动切换（轮播图效果）</title> <style> /* 添加样式 */#output { color: white;background-color: green; text-align: center;width: 20%; height: 3%; margin-top: 1%; position : relative;left: 3%; border-radius: 10px;} </style>
</head>
<body> //插入节点<div id="output">图片轮播开启......(按Enter键关闭轮播)</div></body>
</html>接着获取显示按键信息的元素并且监听整个文档的keydown事件
const outputDiv = document.getElementById('output'); // 获取显示按键信息的元素document.addEventListener('keydown', );// 监听整个文档的keydown事件然后定义一个函数，并且写出获取按键的代码
document.addEventListener('keydown', // 监听整个文档的keydown事件function(event) { const keyCode = event.key; // 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）});接着设置如果按下的键为Enter键，使布尔变量scroll_img取反（false），使上面修改图片路径的代码运行不了
document.addEventListener('keydown', // 监听整个文档的keydown事件function(event) { const keyCode = event.key; // 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）if(keyCode==="Enter"){scroll_img = !scroll_img; }});最后使用if条件语句设置提示信息样式，如果是scroll_img（true），背景色为绿色，否则为红色
document.addEventListener('keydown', // 监听整个文档的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";}});这样一个可以使用键盘控制的完整的轮播图就做好啦！！
完整代码在这里：
<!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: 20%; 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: green; text-align: center;width: 20%; height: 3%; margin-top: 1%; position : relative;left: 3%; 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 = true;function showNextImage1() { if(scroll_img){if(i>4){i = 1;}else{ imgElement.src = `./img_src/p${i}.jpg`;i = i + 1;} }} // 每1秒切换一次图片 （无限循环）setInterval(showNextImage1, 1000); // 【实现四个按钮切换图片】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'); // 获取显示按键信息的元素document.addEventListener('keydown', // 监听整个文档的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>相关文章：
DOM操作和事件监听综合练习——轮播图
下面制作一个如下图所示的轮播图（按Enter键可以控制轮播的开启和关闭，或者点击按钮“第几张”即可跳转到第几张）： 下面是其HTML和CSS代码（还没有设置轮播）： <!DOCTYPE html> <html …...
nodejs：下载，安装，系统环境配置，更换镜像
下载 地址：https://nodejs.org/zh-cn/download/prebuilt-installer 安装包 开始安装 安装完成 配置环境变量 将原来的用户变量-> Path D:\nodejs\node_global 【系统变量】 添加Path–>变量名：NODE_PATH-> 变量值：D: \…...
【Django】视图函数
【Django】视图函数 视图函数的本质是Python中的函数，视图函数负责处理用户的请求并返回响应，该响应可以是网页的HTML内容、重定向、404错误、XML文档、图像或者任何东西，一般在应用中的views.py编写，示例代码如下： …...
MySQL查询-补充
数据准备： -- 部门表 create table dept(deptno int primary key, -- 部门编号 主键：唯一，非空dname varchar(14), -- 部门名称loc varchar(13) -- 部门地址 );insert into dept values (10,accounting,n…...
【Python Tips】多个条件判断——一种更加简洁清晰的写法
一、引言 在python写条件判断 if 语句时，有时会遇到多种条件的真假判断考虑，比如要同时考虑A和B两个变量的True or False，只有当两者都为真，或都为假，或任意为真为假，再继续处理。此时如果用 if，…...
【Vue】简易博客项目跟做
项目框架搭建 1.使用vue create快速搭建vue项目 2.使用VC Code打开新生成的项目 端口号简单配置 修改vue.config.js文件，内容修改如下 所需库安装 npm install vue-resource --save --no-fund npm install vue-router3 --save --no-fund npm install axios --save …...
【HarmonyOS】PixelMap转化为Uri
【HarmonyOS】PixelMap转化为Uri 问题背景 鸿蒙中的PixelMap类型，其实类似于Android和IOS中的bitmap，是对图片数据信息进行描述的一种逻辑运算使用的图片类型。 而鸿蒙中的Uri类型，本质其实是带file头的文件存储地址，是用来指向…...
【架构论文-2】架构设计中存在的问题和改进方向
一、性能优化相关 当前情况 在高负载情况下，系统的响应时间出现了一定程度的延迟。特别是在业务高峰期，大量并发请求导致部分关键业务模块的处理效率降低，影响了用户体验。改进方向 计划引入性能分析工具对系统进行全面的性能剖析࿰…...
go语言中的结构体含义和用法详解
在Go语言中，结构体（struct）是一种聚合数据类型，可以将多个不同类型的数据组合成一个更复杂的类型。结构体类似于面向对象编程中的“类”，但是Go语言没有类和继承的概念，而是通过结构体和接口实现面向对象编程的特性。 1. 结构体的定义 结构体是一组字段（field）的集合…...
985研一学习日记 - 2024.11.8
一个人内耗，说明他活在过去；一个人焦虑，说明他活在未来。只有当一个人平静时，他才活在现在。 日常 1、起床 2、健身 3、LeetCode刷了2题 买卖股票的最佳时机 将最大利润拆分为每天的利润之和，仅仅收集每天的正利润…...
编写一个基于React的聊天室
前言 此前已经编写了一版后端的im，此次就用其作为服务端，可查看参考资料1 代码 使用WebStorm创建React项目 安装依赖包 PS C:\learn-demo\front\chatroom> npm installadded 183 packages, and audited 184 packages in 16s43 packages are looki…...
[前端]NodeJS常见面试题目
什么是非阻塞 I/O? Node.js 如何实现非阻塞 I/O? 非阻塞 I/O 是一种编程模式，它允许 I/O 操作（如读取文件、网络请求等）在执行时不阻塞程序的其余部分。换句话说，当一个 I/O 操作发起后，程序可以立即继续执行其他任…...
【实测可用】Sublime Text4 4180 windows 已测可用
------------------测试时间2024年11月7日------------------- 打开浏览器进入网站： 点击进入修改网站打开sublime text4安装目录选择文件sublime_text.exe搜索80 79 05 00 0f 94 c2更改为c6 41 05 01 b2 00 90(第一个匹配到的)保存文件命名为sublime_text.exe并…...
JAVA日期加减运算 JsonObject 转换对象List
1.用java.util.Calender来实现 Calendar calendarCalendar.getInstance(); calendar.setTime(new Date());System.out.println(calendar.get(Calendar.DAY_OF_MONTH));//今天的日期calendar.set(Calendar.DAY_OF_MONTH,calendar.get(Calendar.DAY_OF_MONTH)1);//让日期加1 Sy…...
在 PostgreSQL 中，重建索引可以通过 `REINDEX` 命令来完成
在 PostgreSQL 中，重建索引 在 PostgreSQL 中，重建索引可以通过 REINDEX 命令来完成。 重建索引的主要目的是提高查询性能，尤其是在数据频繁更新的情况下。以下是重建索引的基本语法和示例： 基本语法 REINDEX INDEX index_name…...
SQL相关常见的面试题
SQL（Structured Query Language）是数据库管理中不可或缺的一部分，因此在技术面试中经常会被问到与 SQL 相关的问题。以下是一些常见的 SQL 面试题及其答案。 基础概念 什么是 SQL？ SQL 是一种用于管理和处理关系型数据库的标准语…...
Vue数据响应式原理
前言 Vue是一个结构的框架,也就是 数据层、视图层、数据-视图层；响应式的原理就是实现当数据更新时，视图层也要相应的更新 响应式实现 基于发布订阅模式和数据劫持实现 1.发布订阅模式：vue使用发布订阅模式来实现数据变动的通知和更新 2…...
Electron + Vue3 开发桌面应用+附源码
什么是 Electron？ Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它由 GitHub 开发并维护，允许开发者使用现代 Web 技术创建原生应用程序。Electron 结合了 Chromium 渲染引擎和 Node.js 运行时环境，使得开发…...
网页服务器框架)
Webserver(5.2)网页服务器框架
目录 网页服务器服务器编程基本框架两种高效的事件处理模式reactor模式proactor模式同步IO模拟Proactor模式 网页服务器 接收、存储，处理来自客户端的HTTP请求，并对其请求做出HTTP响应。 Web服务器底层是基于tcp协议的，因为要保证数据安全。…...
股指期货交易中，如何应对震荡行情？
在股指期货交易中，趋势和震荡是市场波动的两种基本形态。然而，对于许多交易者来说，如何在趋势交易中有效应对震荡行情，却是一个令人头疼的问题。本文将结合相关链接内容，为您详细解读期货交易中如何应对震荡行情。 一…...
图解Linux内核DRM框架：从用户态ioctl到plane更新的完整数据流（以4.14版本为例）
图解Linux内核DRM框架：从用户态ioctl到plane更新的完整数据流（以4.14版本为例） 在图形显示技术领域，Linux内核的DRM（Direct Rendering Manager）框架扮演着核心角色。本文将聚焦于DRM_IOCTL_MODE_SETPLANE这…...
VoxCPM-1.5-WEBUI问题解决：部署常见错误与一键启动脚本详解
VoxCPM-1.5-WEBUI问题解决：部署常见错误与一键启动脚本详解 1. 快速入门指南 1.1 镜像部署准备 在开始使用VoxCPM-1.5-WEBUI之前，您需要确保具备以下条件： 支持CUDA的NVIDIA显卡（建议RTX 3060及以上）至少16GB系统内…...
千问3.5-2B博物馆导览：展品图理解、说明牌OCR与个性化讲解生成
千问3.5-2B博物馆导览：展品图理解、说明牌OCR与个性化讲解生成 1. 博物馆导览新体验 想象一下，当你站在博物馆的展品前，只需用手机拍下展品照片，就能立即获得专业的讲解内容、展品背景故事，甚至还能根据你的兴趣偏好…...
从游戏机到影音中心：用wiliwili解锁Switch的隐藏娱乐潜能
从游戏机到影音中心：用wiliwili解锁Switch的隐藏娱乐潜能 【免费下载链接】wiliwili 专为手柄控制设计的第三方跨平台B站客户端，目前可以运行在PC全平台、PSVita、PS4 和 Nintendo Switch上 项目地址: https://gitcode.com/GitHub_Trending/wi/wiliwil…...
Z-Image-Turbo LoRA Web服务安全加固：禁用前端覆盖负面提示+后端content policy双层防护
Z-Image-Turbo LoRA Web服务安全加固：禁用前端覆盖负面提示后端content policy双层防护 1. 项目概述与安全挑战 造相-Z-Image-Turbo 亚洲美女LoRA Web服务是一个基于Z-Image-Turbo模型的图片生成平台，集成了laonansheng/Asian-beauty-Z-Image-Turbo-To…...
抖音批量下载终极指南：3分钟掌握高效无水印下载技巧
抖音批量下载终极指南：3分钟掌握高效无水印下载技巧 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support…...
Windows内存泄漏排查实战：用VMMap揪出C++程序中的‘内存黑洞’（附Heap快照对比技巧）
Windows内存泄漏排查实战：用VMMap精准定位C程序中的"内存黑洞" 1. 内存泄漏：程序员的隐形噩梦 在C开发领域，内存泄漏堪称最顽固的"慢性病"之一。不同于程序崩溃这类明显故障，内存泄漏往往悄无声息地蚕食系统资…...
球机器人研究报告【202600001】
文章目录球机器人研究报告综合分析多智能体推箱子训练（第100代/第300代）一、意识流分析（神经网络脉冲活动）1. 热图（consciousness_agent2_gen100_ep0_heatmap.png）2. PCA（主成分分析，…...
PCB拼板工艺全解析：从设计到生产的核心要点
1. PCB拼板的核心价值与必要性PCB拼板是电子工程中一项看似简单却极为关键的工艺环节。作为一名从业十年的硬件工程师，我处理过上千款PCB设计，深刻体会到合理拼板对生产效率和成本控制的影响。简单来说，拼板就是将多块相同或不同的PCB按照特定…...
从MP3到微信语音：一份完整的Java音频格式转换工具链搭建指南（附FFmpeg与silk_v3_encoder配置）
Java音频处理实战：构建MP3到微信语音的高效转换工具链 引言 在即时通讯应用开发中，音频消息的处理一直是技术难点之一。特别是当我们需要将常见的MP3格式转换为微信、QQ等平台专用的SILK编码格式时，开发者往往需要跨越多个技术环节。本文将带…...