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

【JavaScript】十四、轮播图

article 2026/2/12 17:15:15

文章目录

实现一个轮播图，功能点包括：

  • 自动播放
  • 鼠标经过暂时播放
  • 鼠标离开继续播放
  • 点击切换按钮手动切换

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">&lt;</button><button class="next">&gt;</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】十四、轮播图

文章目录 实现一个轮播图&#xff0c;功能点包括&#xff1a; 自动播放鼠标经过暂时播放鼠标离开继续播放点击切换按钮手动切换 div盒子嵌套先写出静态HTML&#xff0c;再使用JS来修改样式和数据&#xff0c;渲染页面&#xff1a; <!DOCTYPE html> <html lang"…...

编程日记 2026/2/5 17:28:46

2025 全球音乐 AI 大模型对决：技术革新引领商业变革浪潮

未来的世界声音&#xff1a; 音乐产业如今正被 AI 技术推动着&#xff0c;开启一场智能革命的全新篇章。无论是旋律的诞生&#xff0c;还是工业化编曲的流程&#xff0c;AI 大模型都在以飞快的速度改变着行业的基本逻辑架构。在中国&#xff0c;昆仑万维依靠 Mureka 系列产品在…...

编程日记 2026/2/5 17:28:35

RabbitMQ详解，RabbitMQ是什么?架构是怎样的?

目录 一,RabbitMQ是什么? 二,RabbitMQ架构 2.1 首先我们来看下RabbitMQ里面的心概念Queue是什么? 2.2 交换器Exchange 2.3 RabbitMQ是什么? 2.4 重点看下优先级队列是什么? 三,RabbitMQ集群 3.1 普通集群模式 3.2 镜像队列集群 一,RabbitMQ是什么? 假设我们程序…...

编程日记 2026/2/5 17:28:36

Java 大视界 -- Java 大数据在智能教育自适应学习平台中的用户行为分析与个性化推荐（169）

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

编程日记 2026/2/5 17:28:39

智能打印预约系统：微信小程序+SSM框架实战项目

微信小程序打印室预约系统&#xff0c;采用SSM&#xff08;SpringSpringMVCMyBatis&#xff09;经典框架组合。 一、系统核心功能详解 1. 智能化管理后台 ​用户数据看板​打印店资源管理​预约动态监控​服务评价系统 2. 微信小程序端 ​智能定位服务​预约时段选择​文件…...

编程日记 2026/2/9 16:26:16

Redisson 操作 Redis Stream 消息队列详解及实战案例

目录 一、Redis Stream 概念 1.Redis消息队列-认识消息队列 2.Redis Stream特点 3.Redis Stream与RabbitMQ等消息队列的比较 二.Redis Stream基本操作命令 1.生产消息 2.消费消息 3.消费者组操作 4.确认消息处理 三、Redisson 操作 Stream 的核心 API 1. 获取流的API…...

编程日记 2026/2/9 16:27:16

【深度学习量化交易19】行情数据获取方式比测（1）——基于miniQMT的量化交易回测系统开发实记

我是Mr.看海&#xff0c;我在尝试用信号处理的知识积累和思考方式做量化交易&#xff0c;应用深度学习和AI实现股票自动交易&#xff0c;目的是实现财务自由~ 目前我正在开发基于miniQMT的量化交易系统——看海量化交易系统。 经常使用MiniQMT的朋友都知道&#xff0c;xtquant的…...

编程日记 2026/2/5 17:28:37

23种设计模式-结构型模式-代理

文章目录 简介问题解决方案代码核心设计要点 总结 简介 代理是一种结构型设计模式&#xff0c;让你能够提供对象的替代品或其占位符。代理控制着对于原对象的访问&#xff0c;并允许在把请求提交给对象前后进行一些处理。 问题 为什么要控制对于某个对象的访问呢&#xff1f…...

编程日记 2026/2/10 23:19:21

Windows C++ 排查死锁

开发出来应用程序突然间卡死不动&#xff0c;如果其中是因为死锁问题卡列该如何排查 下面是一个简单的死锁例子 #include <iostream> #include <thread> #include <mutex>std::mutex a, b;void function_a() {std::lock_guard<std::mutex> _x(a);std:…...

编程日记 2026/2/5 17:28:46

ctfshow

1&#xff0c;web517 通过输入两个单引号让查询语句正常&#xff0c;判断是什么注入&#xff0c;使用的是什么字符 然后我们通过order by 判断回显位&#xff0c;进行一个联合查询注入 获取数据库名 ctfshow的sqli-labs和本地搭建最大的不同&#xff0c;就是show的flag不在当前…...

编程日记 2026/2/5 17:31:48

【AI论文】什么、如何、何处以及效果如何？大语言模型测试时缩放技术调研

摘要&#xff1a;随着预训练时代对计算&#xff08;数据和参数&#xff09;缩放的热情逐渐减退&#xff0c;测试时缩放&#xff08;Test-Time Scaling, TTS&#xff09;&#xff0c;也被称作“测试时计算”&#xff0c;已成为一个备受瞩目的研究焦点。近期研究表明&#xff0c;…...

编程日记 2026/2/5 17:28:41

大模型学习一：deepseek api 调用实战以及参数介绍

一、说明 DeepSeek&#xff08;杭州深度求索人工智能基础技术研究有限公司&#xff09;是一家专注于大语言模型&#xff08;LLM&#xff09;研发的中国创新型科技公司&#xff0c;成立于2023年7月17日&#xff0c;由幻方量化孵化。其核心产品包括开源推理模型DeepSeek-R1、多模…...

编程日记 2026/2/5 17:28:45

C++ 编程指南33 - 使用模板来表达适用于多种参数类型的算法

一&#xff1a;概述 在 C 中&#xff0c;模板&#xff08;Templates&#xff09;提供了一种强大的泛型编程方式&#xff0c;使代码可以适用于不同的数据类型&#xff0c;而无需重复编写类似的逻辑。模板的主要目标是&#xff1a; 泛化能力&#xff08;Generality&#xff09;&a…...

编程日记 2026/2/3 4:05:42

MYSQL实现获取某个经纬度区域内的数据

1.创建表 2.插入表数据 INSERT INTO tf_sys.tf_location(name, longitude, latitude, location) VALUES (资料名称1, 114.437625, 16.016914, ST_GeomFromText(POINT(114.437625 16.016914))); INSERT INTO tf_sys.tf_location(name, longitude, latitude, location) VALUES (…...

编程日记 2026/2/5 17:30:56

《Python实战进阶》No39：模型部署——TensorFlow Serving 与 ONNX

第39集&#xff1a;模型部署——TensorFlow Serving 与 ONNX 摘要 在机器学习项目中&#xff0c;训练好的模型需要被部署到生产环境中才能发挥实际价值。本集聚焦于如何将模型高效地部署到生产环境&#xff0c;涵盖TensorFlow Serving和ONNX两种主流工具的使用方法。我们将从理…...

编程日记 2026/2/5 20:23:46

嵌入式调试进阶：从手动到自动的HardFault破案指南

今天和大家聊聊嵌入式开发中让无数新手头疼&#xff0c;但又避不开的HardFault。 还记得我刚入行那会儿&#xff0c;信誓旦旦改了几行代码&#xff0c;信心爆棚地烧录进板子。结果呢&#xff1f;灯&#xff01;没&#xff01;亮&#xff01;调试器显示程序卡在了HardFault_Han…...

编程日记 2025/11/27 8:05:43

YOLOv11区域检测

TrackZone 使用Ultralytics YOLO11 -Ultralytics YOLO 文档 如何通过Ultralytics YOLO11 在Python 中使用 TrackZone&#xff1f; 只需几行代码&#xff0c;您就可以在特定区域设置对象跟踪&#xff0c;从而轻松将其集成到您的项目中。 import cv2from ultralytics import s…...

编程日记 2026/2/5 17:28:42

手工win提权土豆家族一键梭哈

手工提权 就是在没有工具使用的时候进行提权&#xff08;或者是win版本过新导致的exp作者没更新等&#xff09; 优点就是 随选随用 缺点就是非常繁琐&#xff08;建议是先土豆梭哈然后再手工提权&#xff09; 先进行信息收集&#xff08;这边靶机以例子&#xff09; 这个…...

编程日记 2026/2/5 17:28:53

在Qt中直接在构建目录下直接运行.exe文件报错问题分析

在Qt中直接在构建目录下直接运行.exe文件报错问题分析 在学习Qt的过程中遇到过一个问题&#xff0c;直接在Qt构建目录下运行生成的.exe文件时会报错。这和MFC有一定的差别&#xff0c;如果MFC是可以直接运行的。 这是怎么回事呢&#xff1f; 在 Qt 中直接运行构建目录下的 .…...

编程日记 2026/2/5 17:38:38

头戴式面捕头盔：高精度捕捉真人面部表情，赋能元宇宙多场景应用

随着元宇宙虚拟人与现实场景的不断交融&#xff0c;如何赋予虚拟人更加自然&#xff0c;灵动的表情成为了业内人员共同讨论的话题&#xff0c;尤其是在虚拟人直播&#xff0c;影视动画制作方面。在虚拟人直播间&#xff0c;丰富的面部表情可以赋予虚拟人更加生动的情感表达&…...

编程日记 2026/2/5 21:49:43

LLM大模型教程——什么是AI大模型

引言 当GPT-4展现出惊人的上下文理解能力，当Stable Diffusion创造出媲美人类画师的图像作品，当AlphaFold2破解蛋白质折叠密码——这些里程碑事件标志着人工智能发展进入大模型主导的新纪元。本综述将深入解析这一技术革命的核心载体——AI大模型。 一、AI 大模型是什么​ 概…...

编程日记 2026/2/5 18:55:15

产品经理的大语言模型课 04 -模型应用的云、边、端模式对比

目录 算力部署方式的影响因素数据量计算难度前期投入数据隐私应用规模与泛化能力 云、边、端部署的特点和对比典型场景举例社区人脸门禁后厨老鼠识别 未来展望 算力部署方式的影响因素 最近和人工智能从业者进行了非常广泛的沟通&#xff0c;尝试对模型应用的云、边、端模式进…...

编程日记 2025/9/20 4:28:37

机器学习(八)：K-Means聚类原理与实战

声明&#xff1a;未经允许禁止转载与抄袭。 前言 k k k均值&#xff08; k k k-means&#xff09;聚类算法是一种经典的无监督聚类算法&#xff0c;本文将深入解析其理论原理&#xff0c;并在真是数据集上进行算法实践&#xff0c;话不多说&#xff0c;请看下文。 算法原理 …...

编程日记 2026/2/7 2:50:40

基于yolo11的BGA图像目标检测

1.产生图像数据的分辨率 2.产生图像的大小 3.产生图像是黑白或是RGB彩色 灰度图像&#xff0c;达到识别要求&#xff0c;减少计算量 4.标注数据的精准程度 1.模型标注后&#xff0c;少量标注全部人工校验&#xff0c;大量数据抽检&#xff0c;部分人工检验 2.明确边界框贴合…...

编程日记 2025/6/27 16:58:20

分享一些新版GPT-4o使用方式！能多模态生图！

目前GPT-4o的整体测评&#xff0c;真的很惊艳。 不知道又有多少人因为OpenAI的这次更新而失业&#xff0c;当然只要AI用得好&#xff0c;会有更多人因之而受益&#xff01;很多人表示不知道怎么用&#xff0c;对于门外汉来说&#xff0c;4o似乎有点高端。 今天就给大家介绍几…...

编程日记 2025/5/25 14:11:00

【stm32--HAL库DMA+USART+空闲中断不定长收发数据】

串口通信-Hal库实现不定长度收发&#xff0c;DMAUSART DMA串口STM32CUBEMX配置&#xff08;工程创建&#xff09;基础配置时钟配置工程配置 代码编写现象 DMA 在正式配置之前&#xff0c;我们先来一起简单了解一下DMA。DMA&#xff08;Direct Memory Access&#xff0c;直接内…...

编程日记 2026/2/10 6:37:58

【算法中的数学】欧拉筛埃氏筛

筛质数 题目传送门 题目链接 一、题目描述 给定一个正整数 n&#xff0c;请你求出 1∼n 中质数的个数。 输入格式 共一行&#xff0c;包含整数 n。 输出格式 共一行&#xff0c;包含一个整数&#xff0c;表示 1∼n 中质数的个数。 数据范围 1 ≤ n ≤ 10⁶ 输入样例&am…...

编程日记 2026/1/8 4:44:37

【SPP】蓝牙串口配置中LM互操作性要求深度解析

在蓝牙协议栈中&#xff0c;链路管理器&#xff08;Link Manager, LM&#xff09;承担着链路建立、安全管理、功耗控制等核心功能。对于串行端口配置文件&#xff08;SPP&#xff09;而言&#xff0c;LM 的互操作性直接影响连接稳定性、数据安全性和设备功耗。本文基于蓝牙核心…...

编程日记 2026/2/9 18:51:18

Java迭代器【设计模式之迭代器模式】

目录 一.前言 二.正文 1.我写的类为什么不能使用增强for(迭代器遍历) 2.代码健全性——迭代器常见的两个Exception 1.NoSuchElementException 2.ConcurrentModificationException 三.后言 一.前言 本篇面向对象主要为和我一样的小白&#xff0c;主要是对迭代器模式的浅…...

编程日记 2026/2/5 17:28:51

Eclipse IDE

创建新的Java项目和类 在 Eclipse IDE 中创建一个新的 Java 项目和 Java 类的步骤如下&#xff1a; 1. 创建新的 Java 项目 打开 Eclipse IDE。在菜单栏中&#xff0c;点击 File > New > Java Project。在弹出的对话框中&#xff0c;输入项目名称&#xff08;例如&…...

编程日记 2026/2/5 17:31:52