当前位置： 首页 > news >正文

DOM操作和事件监听综合练习——轮播图

news 2025/7/8 18:23:42

下面制作一个如下图所示的轮播图（按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操作和事件监听综合练习——轮播图

下面制作一个如下图所示的轮播图&#xff08;按Enter键可以控制轮播的开启和关闭&#xff0c;或者点击按钮“第几张”即可跳转到第几张&#xff09;&#xff1a; 下面是其HTML和CSS代码&#xff08;还没有设置轮播&#xff09;&#xff1a; <!DOCTYPE html> <html …...

编程日记 2024/11/9 6:39:48

nodejs：下载，安装，系统环境配置，更换镜像

​​​​ 下载 地址&#xff1a;https://nodejs.org/zh-cn/download/prebuilt-installer 安装包 开始安装 安装完成 配置环境变量 将原来的用户变量-> Path D:\nodejs\node_global 【系统变量】 添加Path–>变量名&#xff1a;NODE_PATH-> 变量值&#xff1a;D: \…...

编程日记 2024/11/9 6:38:46

【Django】视图函数

【Django】视图函数 视图函数的本质是Python中的函数&#xff0c;视图函数负责处理用户的请求并返回响应&#xff0c;该响应可以是网页的HTML内容、重定向、404错误、XML文档、图像或者任何东西&#xff0c;一般在应用中的views.py编写&#xff0c;示例代码如下&#xff1a; …...

编程日记 2024/11/9 6:37:45

MySQL查询-补充

数据准备&#xff1a; -- 部门表 create table dept(deptno int primary key, -- 部门编号 主键&#xff1a;唯一&#xff0c;非空dname varchar(14), -- 部门名称loc varchar(13) -- 部门地址 );insert into dept values (10,accounting,n…...

编程日记 2024/11/9 6:35:44

【Python Tips】多个条件判断——一种更加简洁清晰的写法

一、引言 在python写条件判断 if 语句时&#xff0c;有时会遇到多种条件的真假判断考虑&#xff0c;比如要同时考虑A和B两个变量的True or False&#xff0c;只有当两者都为真&#xff0c;或都为假&#xff0c;或任意为真为假&#xff0c;再继续处理。此时如果用 if&#xff0c…...

编程日记 2024/11/9 6:34:42

【Vue】简易博客项目跟做

项目框架搭建 1.使用vue create快速搭建vue项目 2.使用VC Code打开新生成的项目 端口号简单配置 修改vue.config.js文件&#xff0c;内容修改如下 所需库安装 npm install vue-resource --save --no-fund npm install vue-router3 --save --no-fund npm install axios --save …...

编程日记 2024/11/9 6:33:41

【HarmonyOS】PixelMap转化为Uri

【HarmonyOS】PixelMap转化为Uri 问题背景 鸿蒙中的PixelMap类型&#xff0c;其实类似于Android和IOS中的bitmap&#xff0c;是对图片数据信息进行描述的一种逻辑运算使用的图片类型。 而鸿蒙中的Uri类型&#xff0c;本质其实是带file头的文件存储地址&#xff0c;是用来指向…...

编程日记 2024/11/9 6:31:39

【架构论文-2】架构设计中存在的问题和改进方向

一、性能优化相关 当前情况 在高负载情况下&#xff0c;系统的响应时间出现了一定程度的延迟。特别是在业务高峰期&#xff0c;大量并发请求导致部分关键业务模块的处理效率降低&#xff0c;影响了用户体验。改进方向 计划引入性能分析工具对系统进行全面的性能剖析&#xff0…...

编程日记 2024/11/9 6:30:37

go语言中的结构体含义和用法详解

在Go语言中，结构体（struct）是一种聚合数据类型，可以将多个不同类型的数据组合成一个更复杂的类型。结构体类似于面向对象编程中的“类”，但是Go语言没有类和继承的概念，而是通过结构体和接口实现面向对象编程的特性。 1. 结构体的定义 结构体是一组字段（field）的集合…...

编程日记 2024/11/9 6:28:35

985研一学习日记 - 2024.11.8

一个人内耗&#xff0c;说明他活在过去&#xff1b;一个人焦虑&#xff0c;说明他活在未来。只有当一个人平静时&#xff0c;他才活在现在。 日常 1、起床 2、健身 3、LeetCode刷了2题 买卖股票的最佳时机 将最大利润拆分为每天的利润之和&#xff0c;仅仅收集每天的正利润…...

编程日记 2024/11/9 6:27:34

编写一个基于React的聊天室

前言 此前已经编写了一版后端的im&#xff0c;此次就用其作为服务端&#xff0c;可查看参考资料1 代码 使用WebStorm创建React项目 安装依赖包 PS C:\learn-demo\front\chatroom> npm installadded 183 packages, and audited 184 packages in 16s43 packages are looki…...

编程日记 2024/11/9 6:26:33

[前端]NodeJS常见面试题目

什么是非阻塞 I/O? Node.js 如何实现非阻塞 I/O? 非阻塞 I/O 是一种编程模式&#xff0c;它允许 I/O 操作&#xff08;如读取文件、网络请求等&#xff09;在执行时不阻塞程序的其余部分。换句话说&#xff0c;当一个 I/O 操作发起后&#xff0c;程序可以立即继续执行其他任…...

编程日记 2024/11/9 6:25:32

【实测可用】Sublime Text4 4180 windows 已测可用

------------------测试时间2024年11月7日------------------- 打开浏览器进入网站&#xff1a; 点击进入修改网站打开sublime text4安装目录选择文件sublime_text.exe搜索80 79 05 00 0f 94 c2更改为c6 41 05 01 b2 00 90(第一个匹配到的)保存文件命名为sublime_text.exe并…...

编程日记 2024/11/9 6:24:31

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…...

编程日记 2024/11/9 6:23:30

在 PostgreSQL 中，重建索引可以通过 `REINDEX` 命令来完成

在 PostgreSQL 中&#xff0c;重建索引 在 PostgreSQL 中&#xff0c;重建索引可以通过 REINDEX 命令来完成。 重建索引的主要目的是提高查询性能&#xff0c;尤其是在数据频繁更新的情况下。以下是重建索引的基本语法和示例&#xff1a; 基本语法 REINDEX INDEX index_name…...

编程日记 2024/11/9 6:22:29

SQL相关常见的面试题

SQL&#xff08;Structured Query Language&#xff09;是数据库管理中不可或缺的一部分&#xff0c;因此在技术面试中经常会被问到与 SQL 相关的问题。以下是一些常见的 SQL 面试题及其答案。 基础概念 什么是 SQL&#xff1f; SQL 是一种用于管理和处理关系型数据库的标准语…...

编程日记 2024/11/9 6:21:28

Vue数据响应式原理

前言 Vue是一个结构的框架,也就是 数据层、视图层、数据-视图层&#xff1b;响应式的原理就是实现当数据更新时&#xff0c;视图层也要相应的更新 响应式实现 基于发布订阅模式和数据劫持实现 1.发布订阅模式&#xff1a;vue使用发布订阅模式来实现数据变动的通知和更新 2…...

编程日记 2024/11/9 6:20:27

Electron + Vue3 开发桌面应用+附源码

什么是 Electron&#xff1f; Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它由 GitHub 开发并维护&#xff0c;允许开发者使用现代 Web 技术创建原生应用程序。Electron 结合了 Chromium 渲染引擎和 Node.js 运行时环境&#xff0c;使得开发…...

编程日记 2024/11/9 6:19:25

Webserver(5.2)网页服务器框架

目录 网页服务器服务器编程基本框架两种高效的事件处理模式reactor模式proactor模式同步IO模拟Proactor模式 网页服务器 接收、存储&#xff0c;处理来自客户端的HTTP请求&#xff0c;并对其请求做出HTTP响应。 Web服务器底层是基于tcp协议的&#xff0c;因为要保证数据安全。…...

编程日记 2024/11/9 6:18:24

股指期货交易中，如何应对震荡行情？

在股指期货交易中&#xff0c;趋势和震荡是市场波动的两种基本形态。然而&#xff0c;对于许多交易者来说&#xff0c;如何在趋势交易中有效应对震荡行情&#xff0c;却是一个令人头疼的问题。本文将结合相关链接内容&#xff0c;为您详细解读期货交易中如何应对震荡行情。 一…...

编程日记 2024/11/9 6:17:23

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/7/8 16:42:22

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/7/7 20:59:23

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/7/5 13:53:37

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/7/8 15:11:12

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/7/7 14:31:27

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/7/8 2:49:05

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/7/8 17:34:33

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/7/8 15:28:22

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/7/7 1:07:56

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/7/5 11:49:59