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协议的，因为要保证数据安全。…...
股指期货交易中，如何应对震荡行情？
在股指期货交易中，趋势和震荡是市场波动的两种基本形态。然而，对于许多交易者来说，如何在趋势交易中有效应对震荡行情，却是一个令人头疼的问题。本文将结合相关链接内容，为您详细解读期货交易中如何应对震荡行情。 一…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
NLP学习路线图（二十三）：长短期记忆网络（LSTM）
在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
如何在最短时间内提升打ctf（web)的水平？
刚刚刷完2遍 bugku 的 web 题，前来答题。 每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
云原生周刊：k0s 成为 CNCF 沙箱项目
开源项目推荐 HAMi HAMi（原名 k8s‑vGPU‑scheduler）是一款 CNCF Sandbox 级别的开源 K8s 中间件，通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度，为容器提供统一接口，实现细粒度资源配额…...