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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/59834.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[全网最细数据结构完整版]第七篇:3分钟带你吃透队列

目录 1->队列的概念及结构 2->队列的实现 2.1定义队列基本结构 struct QueueNode 和 struct Queue 2.2队列初始化函数 QueueInit 函数 2.3队列销毁函数 QueueDestroy 函数 2.4队列插入数据函数 QueuePush 函数 2.5判断队列是否为空,空返回true,非空返回false 2.6队列删…

力扣动态规划基础版(矩阵型)

62.不同路径&#xff08;唯一路径问题&#xff09; 62. 不同路径https://leetcode.cn/problems/unique-paths/ 方法一&#xff1a;动态规划 找状态转移方程&#xff0c;也就是说它从左上角走到右下角&#xff0c;只能往右或者往下走&#xff0c;那么设置一个位置为&#xff…

算法(第一周)

一周周五&#xff0c;总结一下本周的算法学习&#xff0c;从本周开始重新学习许久未见的算法&#xff0c;当然不同于大一时使用的 C 语言以及做过的简单题&#xff0c;现在是每天一题 C 和 JavaScript&#xff08;还在学&#xff0c;目前只写了一题&#xff09; 题单是代码随想…

08 反射与注解

目录 1.Java类加载机制 类加载器 双亲委派模型 工作流程 优点 2.反射 基本概念 常见用法 1. 获取 Class 对象 2.获取构造方法 3.获取成员方法 4.获取成员变量 3.注解 注解的基本概念 定义和使用注解 定义注解 使用注解 解释 元注解详解 常见内置注解 总结…

【Linux第八课-进程间通信】管道、共享内存、消息队列、信号量、信号、可重入函数、volatile

目录 进程间通信为什么&#xff1f;是什么&#xff1f;怎么办&#xff1f;一般规律具体做法 匿名管道原理代码 命名管道原理代码 system V共享内存消息队列信号量信号量的接口 信号概念为什么&#xff1f;怎么办&#xff1f;准备信号的产生信号的保存概念三张表匹配的操作和系统…

【一些正经的思考】牵牛花在秋天播种可以开花吗

这是一篇正经的思考&#xff0c;因为是发生在工位上的事情&#xff0c;所以这也是上班记录~ 我入职新公司已经两个月了&#xff0c;和部门的新伙伴出去吃饭的频率高了1000%&#xff0c;不得不说&#xff0c;这边的食堂确实不是那么好吃&#xff0c;就和小伙伴经常去一个在江边…

零基础Java第十四期:继承与多态(二)

目录 一、继承 1.1. 继承的方式 1.2. final关键字 1.3. 继承与组合 1.4. protected关键字 二、多态 2.1. 多态的概念 2.2. 向上转型 2.3. 重写 2.4. 向下转型 2.5. 多态的优缺点 一、继承 1.1. 继承的方式 猫类可以继承动物类&#xff0c;中华田园猫类可以继承猫类…

RocketMQ 广播消息

所谓的广播消息就是发送的一条消息会被多个消费者收到。 ⼴播是向主题&#xff08; topic &#xff09;的所有订阅者发送消息。订阅同⼀个 topic 的多个消费者&#xff0c;能全量收到⽣产者发送的所有消息。 生产者发送了10个order&#xff0c;每个order里面有5个消息&#xff…

.Net IOC理解及代码实现

IOC理解 IoC(Inversion of Control)&#xff1a;即控制反转&#xff0c;这是一种设计思想&#xff0c;指将对象的控制权交给IOC容器&#xff0c;由容器来实现对象的创建、管理&#xff0c;程序员只需要从容器获取想要的对象就可以了。DI(Dependency Injection)&#xff0c;即依…

react的创建与书写

一&#xff1a;创建项目 超全面详细一条龙教程&#xff01;从零搭建React项目全家桶&#xff08;上篇&#xff09; - 知乎 1.创建一个文件夹&#xff0c;shift鼠标右键选择在此处打开powershell 2.为了加速npm下载速度&#xff0c;先把npm设置为淘宝镜像地址。 npm config s…

【微信小游戏学习心得】

这里是引用 微信小游戏学习心得 简介了解微信小游戏理解2d游戏原理数据驱动视图总结 简介 本人通过学习了解微信小游戏&#xff0c;学习微信小游戏&#xff0c;加深了对前端框架&#xff0c;vue和react基于数据驱动视图的理解&#xff0c;及浏览器文档模型和javaScript之间的关…

深究JS底层原理

一、JS中八种数据类型判断方法 在JavaScript中&#xff0c;数据类型分为两大类&#xff1a;基本&#xff08;原始&#xff09;数据类型和引用&#xff08;对象&#xff09;数据类型。 基本数据类型&#xff08;Primitive Data Types&#xff09; 基本数据类型是表示简单的数…

ssm071北京集联软件科技有限公司信息管理系统+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;北京集联软件科技有限公司信息管理系统 \ 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本信息…

Yocto 项目下通过网络更新内核、设备树及模块

Yocto 项目下通过网络更新内核、设备树及模块 前言 在 Yocto 项目的开发过程中&#xff0c;特别是在进行 BSP&#xff08;Board Support Package&#xff09;开发时&#xff0c;经常需要调整特定软件包的版本&#xff0c;修改内核、设备树以及内核模块。然而&#xff0c;每次…

k8s集群安装(kubeadm)

k8s集群安装&#xff08;kubeadm&#xff09; 1、环境准备&#xff08;master和node节点都执行&#xff09;1.1、替换yum源1.2、关闭selinux1.3、永久关闭防火墙1.4、永久关闭swap1.5、修改主机名添加host1.6、时间同步1.7、将桥接的IPv4流量传递到iptables的链1.8、docker安装…

【日常问题排查小技巧-连载】

线上服务CPU飙高排查 先执行 top&#xff0c;找到CPU占用比较高的进程 id&#xff0c;&#xff08;比如 21448&#xff09; jstack 进程 id > show.txt&#xff08;jstack 21448 > show.txt&#xff09; 找到进程中CPU占用比较高的线程&#xff0c;线程 id 转换为 16 进…

您与此网站之间建立的连接不安全解决方法

如果你打开网站&#xff0c;地址栏有警告&#xff0c;点进去是这样的提示&#xff1a;您与此网站之间建立的连接不安全&#xff0c;了解详细信息。 请勿在此网站上输入任何敏感信息&#xff08;例如密码或信用卡信息&#xff09;&#xff0c;因为攻击者可能会盗取这些信息。 …

【与AI+】学习SAP开发有什么渠道可以推荐

前言&#xff1a;好的&#xff0c;我又将开辟一个新的专栏&#xff0c;这个专栏呢&#xff0c;就准备放一些我向AI提问的问题&#xff0c;以及AI的回答。因为感觉真的好方便哈哈哈~ 我不是很确定我的专栏文章内容是否涉及版权&#xff0c;以及也不确定这些整合过的文字是否涉嫌…

江苏博才众创科技产业园集团拟投资10亿元在泰兴打造汽车零部件产业园

2024年11月7日&#xff0c;泰兴市高新技术产业开发区与江苏博才众创科技产业园集团举行新能源汽车零部件智能制造产业园项目签约仪式。 泰兴市高新区党工委委员、管理办副主任王峰表示&#xff1a;高新区是全市项目建设的主阵地&#xff0c;近年来聚焦高端化、智能化、绿色化&a…

【python】Flask

文章目录 1、Flask 介绍2、Flask 实现网页版美颜效果3、参考 1、Flask 介绍 Flask 是一个用 Python 编写的轻量级 Web 应用框架。它设计简单且易于扩展&#xff0c;非常适合小型项目到大型应用的开发。 以下是一些 Flask 库中常用的函数和组件&#xff1a; 一、Flask 应用对…