【JavaScript】十四、轮播图
文章目录
实现一个轮播图,功能点包括:
- 自动播放
- 鼠标经过暂时播放
- 鼠标离开继续播放
- 点击切换按钮手动切换
div盒子嵌套先写出静态HTML,再使用JS来修改样式和数据,渲染页面:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图点击切换</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了?</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div></div><script>// 1、初始数据const data = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },]// 2、轮播图播放到的位置,全局变量,放这儿让大家共同修改和使用let index = 0// 3、DOM对象获取const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const div = document.querySelector('.slider-footer')const prev = document.querySelector('.prev')const next = document.querySelector('.next')// 重复代码抽取function updateCss(index = 0) {img.src = data[index].urlp.innerHTML = data[index].titlediv.style.backgroundColor = data[index].color// 先移除有小圆点的对象的样式const hasActive = document.querySelector('.slider-indicator .active')hasActive.classList.remove('active')// index是0-7,而无序列表下的li是1-8,所以加1const li = document.querySelector(`.slider-indicator li:nth-child(${index + 1})`)li.classList.add('active')}// 4、点击上一张prev.addEventListener('click', function () {index--if (index < 0) {index = data.length - 1}// 渲染代码,prev和next一样,抽成方法updateCss(index)})// 5、点击下一张next.addEventListener('click', function () {index++// 如果当前是最后一张了,那就让下次点击变成第一张if (index >= data.length) {index = 0}updateCss(index)})// 6、定时任务实现自动轮播let timerId = setInterval(function () {// 自动播放,相当于以一定频率一直点next按钮// 这里直接用next按钮对象.click(),就是手动调用它的点击事件函数// 当然你也可以重复写渲染修改DOM对象属性的代码,但冗余next.click()}, 1000)// 7、给轮播图所在的整个区域(大盒子)添加鼠标经过和离开事件const box = document.querySelector('.slider')// 8、鼠标经过大盒子,停止定时器box.addEventListener('mouseenter', function () {clearInterval(timerId)})// 9、鼠标离开大盒子,开启新的定时器box.addEventListener('mouseleave', function () {// 先清理旧定时器,下面再开启一个新的定时器,这是一个好的写法clearInterval(timerId)timerId = setInterval(function () {next.click()}, 1000)})</script>
</body></html>
关键点:
- 点击下一张,直接先index++,第一次写成了dataArr[index + 1] 并在末尾index++更新位置,繁琐了
- 点击下一张,++后,如果超出数据量,则重置为0
- 修改DOM对象样式属性的渲染代码,冗余时抽取一下
- DOM对象.click(),就是手动调用它的点击事件函数
- 鼠标离开,要开启定时任务前,先把旧的定时任务移除掉
Shift + Command + 5 开始录屏
Control + Command + Esc 结束录屏
录屏看下效果:
轮播图效果录屏
视频转GIF:https://gif-tool.whatthehell.cn/video
相关文章:
【JavaScript】十四、轮播图
文章目录 实现一个轮播图,功能点包括: 自动播放鼠标经过暂时播放鼠标离开继续播放点击切换按钮手动切换 div盒子嵌套先写出静态HTML,再使用JS来修改样式和数据,渲染页面: <!DOCTYPE html> <html lang"…...
19信号和槽_信号和槽的基本概念
①Linux 信号 Signal 是系统内部的通知机制. 是进程间通信的方式 (给进程发信号kill命令,像情景内存泄漏,管道一端关闭另一端还是读,会给进程发信号) ②信号三要素 信号源: 谁发的信号 信号的类型: 哪种类别的信号 信…...
云端革命:数字文明的重构与新生
引言:算力大爆炸时代 2023年,当ChatGPT在全球掀起AI狂潮时,很少有人意识到,支撑这场智能革命的正是背后庞大的云计算基础设施。每天,全球云计算平台处理的数据量超过500EB,相当于5亿部高清电影;…...
论文阅读笔记:Denoising Diffusion Implicit Models (4)
0、快速访问 论文阅读笔记:Denoising Diffusion Implicit Models (1) 论文阅读笔记:Denoising Diffusion Implicit Models (2) 论文阅读笔记:Denoising Diffusion Implicit Models (…...
红帽Linux怎么重置密码
完整流程 ●重启操作系统,进入启动界面 ●然后按进入选择项界面 ●找到linux单词开头的那一行,然后移动到该行末尾(方向键移动或者使用键盘上的end),在末尾加入rd.break ●按ctrl x进入rd.break模式 ●在该模式下依次…...
关于存储的笔记
存储简介 名称适用场景常见运用网络环境备注块存储高性能、低延迟数据库局域网专业文件存储数据共享共享文件夹、非结构化数据局域网通用对象存储大数据、云存储网盘、网络媒体公网(断点续传、去重)海量 存储协议 名称协议块存储FC-SAN或IP-SAN承载的…...
java根据集合中对象的属性值大小生成排名
1:根据对象属性降序排列 public static <T extends Comparable<? super T>> LinkedHashMap<T, Integer> calculateRanking(List<ProductPerformanceInfoVO> dataList, Function<ProductPerformanceInfoVO, T> keyExtractor) {Linked…...
蓝桥杯嵌入式16届—— LED模块
使用主板 是STMG431RBT6 STMG431RBT6资源 资源配置表 跳线说明表 引脚状况 PC8~PC15分别对应着LD1~LD8 SN74HC573ADWR 是一种锁存器 当 LE(锁存使能)为高电平,输出 Q 实时跟随输入 D 的变化。当 LE 为低电平,输出锁定为最后…...
【IOS webview】源代码映射错误,页面卡住不动
报错场景 safari页面报源代码映射错误,页面卡住不动。 机型:IOS13 技术栈:react 其他IOS也会报错,但不影响页面显示。 debug webpack配置不要GENERATE_SOURCEMAP。 解决方法: GENERATE_SOURCEMAPfalse react-app…...
206. 反转链表 92. 反转链表 II 25. K 个一组翻转链表
leetcode Hot 100系列 文章目录 一、翻转链表二、反转链表 II三、K 个一组翻转链表总结 一、翻转链表 建立pre为空,建立cur为head,开始循环:先保存cur的next的值,再将cur的next置为pre,将pre前进到cur的位置…...
绘制动态甘特图(以流水车间调度为例)
import matplotlib.pyplot as plt import matplotlib.animation as animation import numpy as np from matplotlib import cm# 中文字体配置(必须放在所有绘图语句之前) plt.rcParams[font.sans-serif] [SimHei] plt.rcParams[axes.unicode_minus] Fa…...
生成式AI应用带来持续升级的网络安全风险
生成式AI应用带来持续升级的网络安全风险概要 根据Netskope最新研究,企业向生成式AI(GenAI)应用共享的数据量呈现爆炸式增长,一年内激增30倍。目前平均每家企业每月向AI工具传输的数据量已达7.7GB,较一年前的250MB实现…...
C++17更新内容汇总
C17 是 C14 的进一步改进版本,它引入了许多增强特性,优化了语法,并提升了编译期计算能力。以下是 C17 的主要更新内容: 1. 结构化绑定(Structured Bindings) 允许同时解构多个变量,从 std::tup…...
conda activate激活环境失败问题
出现 CondaError: Run conda init before conda activate 的错误,通常是因为 Conda 没有正确初始化当前的命令行环境。以下是解决方法: 1. 初始化 Conda 运行以下命令以初始化 Conda: conda init解释: conda init 会修改当前 S…...
TensorFlow实现逻辑回归
目录 前言TensorFlow实现逻辑回归 前言 实现逻辑回归的套路和实现线性回归差不多, 只不过逻辑回归的目标函数和损失函数不一样而已. TensorFlow实现逻辑回归 import tensorflow as tf import numpy as np import matplotlib.pyplot as plt from sklearn.datasets import mak…...
第十四届蓝桥杯大赛软件赛省赛Python 大学 C 组:6.棋盘
题目1 棋盘 小蓝拥有 nn 大小的棋盘,一开始棋盘上全都是白子。 小蓝进行了 m 次操作,每次操作会将棋盘上某个范围内的所有棋子的颜色取反(也就是白色棋子变为黑色,黑色棋子变为白色)。 请输出所有操作做完后棋盘上每个棋子的颜色。 输入格…...
电商场景下高稳定性数据接口的选型与实践
在电商系统开发中,API接口需要应对高并发请求、动态数据更新和复杂业务场景。我将重点解析电商场景对数据接口的特殊需求及选型方案。 一、电商API必备的四大核心能力 千万级商品数据实时同步 支持SKU基础信息/价格/库存多维度更新每日增量数据抓取与历史版本对比…...
内网服务器centos7安装jdk17
1. 下载 JDK 17 安装包(在外网环境操作) 在可联网的机器上下载 JDK 17 的压缩包(推荐使用 OpenJDK): OpenJDK 官方源: Adoptium Eclipse Temurin Azul Zulu 直接下载命令示例(在外网机器上执行…...
Git 使用教程
Git 使用教程 Git 是目前最流行的分布式版本控制系统,它能够高效地管理代码,并支持团队协作开发。本文将介绍 Git 的基本概念、常用命令以及如何在实际项目中使用 Git 进行版本控制。 1. Git 基本概念 在使用 Git 之前,需要了解以下几个基…...
【无标题】跨网段耦合器解决欧姆龙CJ系列PLC通讯问题案例
欧姆龙CJ系列PLC不同网段的通讯问题 一、项目背景 某大型制造企业的生产车间内,采用了多台欧姆龙CJ系列PLC对生产设备进行控制。随着企业智能化改造的推进,需要将这些PLC接入工厂的工业以太网,以便实现生产数据的实时采集、远程监控以及与企业…...
13_pandas可视化_seaborn
导入库 import numpy as np import pandas as pd # import matplotlib.pyplot as plt #交互环境中不需要导入 import seaborn as sns sns.set_context({figure.figsize:[8, 6]}) # 设置图大小 # 屏蔽警告 import warnings warnings.filterwarnings("ignore")关系图 …...
【C++进阶四】vector模拟实现
目录 1.构造函数 (1)无参构造 (2)带参构造函数 (3)用迭代器构造初始化函数 (4)拷贝构造函数 2.operator= 3.operator[] 4.size() 5.capacity() 6.push_back 7.reserve 8.迭代器(vector的原生指针) 9.resize 10.pop_back 11.insert 12.erase 13.memcpy…...
14使用按钮实现helloworld(1)
目录 还可以通过按钮的方式来创建 hello world 涉及Qt 中的信号槽机制本质就是给按钮的点击操作,关联上一个处理函数当用户点击的时候 就会执行这个处理函数 connect(谁发的信号, 信号类型, 谁来处理这个信息, 怎么处理的&…...
嵌入式EMC设计面试题及参考答案
目录 解释 EMC(电磁兼容性)的定义及其两个核心方面(EMI 和 EMS) 电磁兼容三要素及相互关系 为什么产品必须进行 EMC 设计?列举至少三个实际工程原因 分贝(dB)在 EMC 测试中的作用是什么?为何采用对数单位描述干扰强度? 传导干扰与辐射干扰的本质区别及典型频率范围…...
cursor的.cursorrules详解
文章目录 1. 文件位置与作用2. 基本语法规则3. 常用规则类型与示例3.1 忽略文件/目录3.2 限制代码生成范围3.3 自定义补全建议3.4 安全规则 4. 高级用法4.1 条件规则4.2 正则表达式匹配4.3 继承规则 5. 示例文件6. 注意事项 Cursor 是一款基于 AI 的智能代码编辑器,…...
Opencv计算机视觉编程攻略-第七节 提取直线、轮廓和区域
第七节 提取直线、轮廓和区域 1.用Canny 算子检测图像轮廓2.用霍夫变换检测直线;3.点集的直线拟合4.提取连续区域5.计算区域的形状描述子 图像的边缘区域勾画出了图像含有重要的视觉信息。正因如此,边缘可应用于目标识别等领域。但是简单的二值边缘分布图…...
清明假期在即
2025年4月2日,6~22℃,一般 遇见的事:这么都是清明出去玩?你们不扫墓的么。 感受到的情绪:当精力不放在一个人身上,你就会看到很多人,其实可以去接触的。 反思:抖音上那么多不幸和幸…...
数字孪生技术解析:开启虚拟与现实融合新时代
一、数字孪生技术的概念与原理 数字孪生技术是一种通过构建物理对象的数字映射,实现虚拟与现实同步的技术。该技术集成了物联网、云计算、人工智能、大数据等多种前沿技术,能够对物理世界进行全方位的仿真和管理。在数字孪生技术中,物理建模…...
Docker Registry 清理镜像最佳实践
文章目录 registry-clean1. 简介2. 功能3. 安装 docker4. 配置 docker5. 配置域名解析6. 部署 registry7. Registry API 管理8. 批量清理镜像9. 其他10. 参考 registry-clean 1. 简介 registry-clean 是一个强大而高效的解决方案,旨在简化您的 Docker 镜像仓库管理…...
进程间的通信
一.理解 1.进程间通信的目的 数据传输,资源共享,通知事件,进程控制 2.进程间通信的本质 先让不同的进程看到"同一份"资源(该资源只能由OS系统提供,不能由任何一个进程提供) 3.具体通信方式 …...
当实时消费遇到 SPL:让数据处理更高效、简单
作者:豁朗 通过 SPL 消费,将业务逻辑“左移” SLS 对实时消费进行了功能升级,推出了 基于 SPL 的规则消费功能。在实时消费过程中,用户只需通过简单的 SPL 配置即可完成服务端的数据清洗和预处理操作。通过SPL消费可以将客户端复…...
Python----机器学习(线性回归:反向传播和梯度下降)
一、前向传播与反向传播的区别 前向传播是在参数固定后,向公式中传入参数,进行预测的一个过程。当参 数值选择的不恰当时,会导致最后的预测值不符合我们的预期,于是我们就 需要重新修改参数值。 在前向传播实验中时,我…...
如何平衡元器件成本与性能
要平衡元器件成本与性能,企业应当明确设计需求和目标、优化元器件选型策略、建立成本性能评估体系、推进标准化设计、加强供应链管理。其中,优化元器件选型策略尤其关键,它直接关系到产品的成本、性能与生命周期。在选型时,工程师…...
java项目分享-分布式电商项目附软件链接
今天来分享一下github上最热门的开源电商项目安装部署,star 12.2k,自行安装部署历时两天,看了这篇文章快的话半天搞定!该踩的坑都踩完了,软件也打包好了就差喂嘴里。 项目简介 mall-swarm是一套微服务商城系统…...
低代码框架
在数字化转型浪潮中,软件开发的效率与成本成为企业关注的焦点。低代码框架应运而生,以其独特的开发模式,打破了传统软件开发的壁垒,为企业和开发者带来了全新的解决方案。那么,究竟什么是低代码框架呢? …...
Git Reset 命令详解与实用示例
文章目录 Git Reset 命令详解与实用示例git reset 主要选项git reset 示例1. 撤销最近一次提交(但保留更改)2. 撤销最近一次提交,并清除暂存区3. 彻底撤销提交,并丢弃所有更改4. 回退到特定的提交5. 取消暂存的文件 git reset 与 …...
多层内网渗透测试虚拟仿真实验环境(Tomcat、ladon64、frp、Weblogic、权限维持、SSH Server Wrapper后门)
在线环境:https://www.yijinglab.com/ 拓扑图 信息收集 IP地址扫描 确定目标IP为10.1.1.121 全端口扫描 访问靶机8080端口,发现目标是一个Tomcat服务,版本...
<贪心算法>
前言:在主包还没有接触算法的时候,就常听人提起“贪心”,当时是layman,根本不知道说的是什么,以为很难呢,但去了解一下,发现也不过如此嘛(bushi),还以为是什么高级东西呢…...
使用PyTorch实现GoogleNet(Inception)并训练Fashion-MNIST
GoogleNet(又称Inception v1)是2014年ILSVRC冠军模型,其核心创新是Inception模块,通过并行多尺度卷积提升特征提取能力。本文将展示如何用PyTorch实现GoogleNet,并在Fashion-MNIST数据集上进行训练。 1. 环境准备 im…...
KingbaseES物理备份还原之备份还原
此篇续接上一篇<<KingbaseES物理备份还原之物理备份>>,上一篇写物理备份相关操作,此篇写备份还原的具体操作步骤. KingbaseES版本:V009R004C011B003 一.执行最新物理备份还原 --停止数据库服务,并创建物理备份还原测试目录 [V9R4C11B3192-168-198-198 V8]$ sys_ct…...
Unity Standard Shader 解析(二)之ForwardAdd(标准版)
一、ForwardAdd // Additive forward pass (one light per pass)Pass{Name "FORWARD_DELTA"Tags { "LightMode" "ForwardAdd" }Blend [_SrcBlend] OneFog { Color (0,0,0,0) } // in additive pass fog should be blackZWrite OffZTest LEqual…...
.NET 使用 WMQ 连接Queue 发送 message 实例
1. 首先得下载客户端,没有客户端无法发送message. 安装好之后长这样 我装的是7.5 安装目录如下 tools/dotnet 目录中有演示的demo 2. .Net 连接MQ必须引用bin目录中的 amqmdnet.dll 因为他是创建Queuemanager 的核心库, 项目中引用using IBM.WMQ; 才…...
设计模式之单例模式
视频链接: 设计模式|狂神说 单例模式是什么? 单例模式是确保一个类在整个应用程序中只有一个实例,并提供一个全局方法访问这个实例。 单例模式分为饿汉式和懒汉式。 饿汉式单例 饿汉式顾名思义就是,程序一启动就创建这个单例bea…...
从入门到入土,SQLServer 2022慢查询问题总结
列为,由于公司原因,作者接触了一个SQLServer 2022作为数据存储到项目,可能是上一任的哥们儿离开的时候带有情绪,所以现在项目的主要问题就是,所有功能都实现了,但是就是慢,列表页3s打底,客户很生气,经过几周摸爬滚打,作以下总结,作为自己的成长记录。 一、索引问题…...
大语言模型在端到端智驾中的应用
大语言模型在端到端智驾中的应用 双系统端到端 小鹏:AI天玑系统—神经网络XNet规控大模型XPlanner大语言模型XBrain 商汤绝影:DriveAGI 理想:端到端VLM VLA端到端 Waymo:EMMA OPENEMMA Wayve:LINGO-2...
【深度学习量化交易19】行情数据获取方式比测(1)——基于miniQMT的量化交易回测系统开发实记
我是Mr.看海,我在尝试用信号处理的知识积累和思考方式做量化交易,应用深度学习和AI实现股票自动交易,目的是实现财务自由~ 目前我正在开发基于miniQMT的量化交易系统——看海量化交易系统。 经常使用MiniQMT的朋友都知道,xtquant的…...
《网络管理》实践环节03:snmp服务器上对网络设备和服务器进行初步监控
兰生幽谷,不为莫服而不芳; 君子行义,不为莫知而止休。 应用拓扑图 3.0准备工作 所有Linux服务器上(服务器和Agent端)安装下列工具 yum -y install net-snmp net-snmp-utils 保证所有的HCL网络设备和服务器相互间能…...
linux操作系统
1.linux进程管理 操作系统都有进程的概念 查看和关闭程序 2.关闭进程 3,查看计算机硬件信息 4.定时任务...
Python基础语法 - 判断语句
Python基础语法 - 判断语句 1. if语句 if 条件:# 条件为True时执行的代码示例 age 18 if age > 18:print("您已成年")2. if-else语句 if 条件:# 条件为True时执行的代码 else:# 条件为False时执行的代码示例 age 16 if age > 18:print("您已成年&q…...
c++柔性数组、友元、类模版
目录 1、柔性数组: 2、友元函数: 3、静态成员 注意事项 面试题:c/c static的作用? C语言: C: 为什么可以创建出 objx 4、对象与对象之间的关系 5、类模版 1、柔性数组: #define _CRT_SECURE_NO_WARNINGS #…...