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

HTML+CSS+JavaScript：轮播图的自动播放、手动播放、鼠标悬停暂停播放

news 2025/11/5 2:45:30

一、需求

昨天我们做了轮播图的自动播放，即每隔一秒自动切换一次

今天我们增加两个需求：

1、鼠标点击向右按钮，轮播图往后切换一次；鼠标点击向左按钮，轮播图往前切换一次

2、鼠标悬停在轮播图区域中时，轮播图暂停播放

 

二、代码素材

以下是缺失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 sliderData = [{ 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)' },]</script>
</body></html>

三、算法思路

1、将代码素材在浏览器中打开，并按F12进入开发者模式，分析各个HTML标签在轮播图中的位置及作用

2、划分业务模块：

        2.1.  模块一：自动播放模块

        2.2.  模块二：手动播放模块

        2.3.  模块三：鼠标悬停暂停播放模块

3、由于三个模块都与轮播图的播放有关，所以我们可以封装一个函数，实现轮播图的渲染

4、手动播放模块：分别为两个按钮添加鼠标点击事件，计数器 i 配合渲染函数实现手动播放下一张与手动播放上一张

 5、自动播放模块：利用间歇函数实现一秒切换一次的功能，间歇函数中调用手动播放下一张模块中的鼠标点击事件实现轮播图的顺序播放

6、鼠标悬停暂停播放模块：注册光标进入事件，光标进入，终止定时器；注册光标离开事件，光标离开，开启定时器

四、完整代码

<!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 sliderData = [{ 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)' },]const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const ul = document.querySelector('.slider-footer .slider-indicator')const footer = document.querySelector('.slider-footer')let i = 0function boFang() {img.src = `./images/slider0${i + 1}.jpg`p.innerHTML = sliderData[i].titlefooter.style.backgroundColor = sliderData[i].color//注意classList.remove()括号中的类名不需要加点号！document.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}//自动播放模块let timer = setInterval(() => {next.click()//自动调用鼠标点击事件}, 1000)//手动播放模块const prev = document.querySelector('.prev')const next = document.querySelector('.next')prev.addEventListener('click', () => {i = i - 1 === -1 ? 7 : i - 1boFang()})next.addEventListener('click', () => {i = (i + 1) % 8boFang()})//鼠标悬停暂停播放模块const slider = document.querySelector('.slider')slider.addEventListener('mouseenter', () => {clearInterval(timer)})slider.addEventListener('mouseleave', () => {//开启定时器//注意，再次开启定时器不要写let timertimer = setInterval(() => {next.click()//自动调用鼠标点击事件}, 1000)})
</script>
</body></html>

相关文章：

HTML+CSS+JavaScript：轮播图的自动播放、手动播放、鼠标悬停暂停播放

一、需求 昨天我们做了轮播图的自动播放&#xff0c;即每隔一秒自动切换一次 今天我们增加两个需求&#xff1a; 1、鼠标点击向右按钮&#xff0c;轮播图往后切换一次&#xff1b;鼠标点击向左按钮&#xff0c;轮播图往前切换一次 2、鼠标悬停在轮播图区域中时&#xff0c;…...

编程日记 2023/8/1 21:44:37

微信小程序：生成二维码带参数并获取值

通过后台接口可以获取小程序任意页面的小程序码&#xff0c;需要注意的是接口只能生成已发布的小程序的二维码 小程序接口文档 获取 scene 值 1&#xff09;scene 字段的值会作为 query 参数传递给小程序/小游戏。用户扫描该码进入小程序/小游戏后&#xff0c;开发者可以获取…...

编程日记 2023/8/1 21:43:35

《Java面向对象程序设计》学习笔记——第 3 章 运算符、表达式和语句

专栏&#xff1a;《Java面向对象程序设计》学习笔记...

编程日记 2023/8/1 21:42:33

XML约束和解析

文章目录 概述使用场景语法dtd约束Schema约束解析DOM4j&#xff08;重点&#xff09; 概述 可扩展的标记性语言 使用场景 以前: 传输数据的媒介。 例如&#xff1a;微服务架构中&#xff0c;可以用xml文件进行多语言之间的的联系。 现在: 做配置文件 现在作为传输数据的媒介…...

编程日记 2023/8/1 21:41:31

网络层：IP协议/Mac协议

IP协议 主机: 配有IP地址, 但是不进行路由控制的设备; 路由器: 即配有IP地址, 又能进行路由控制; 节点: 主机和路由器的统 称; IP 目标网络&#xff08;前半部分&#xff09; 目标主机&#xff08;后半部分&#xff09; IP层的核心&#xff1a;IP地址定位主机&#xff08;定…...

编程日记 2023/8/1 21:40:30

让你不在好奇怎么把录音转化成文字更快捷

某天&#xff0c;小琳参加了一场激动人心的讲座&#xff0c;讲座内容非常有价值&#xff0c;但她却发现自己没有时间做详细的笔记。小琳感到非常苦恼&#xff0c;因为她害怕错过任何重要的信息。就在她感到无助的时候&#xff0c;她的好朋友小芳建议她可以借助录音转文字技术来…...

编程日记 2023/8/1 21:39:29

分布式异步任务处理组件（四）

基于zookeeper的HA集群设计思路-- 各个节点都可以消费任务&#xff0c;但是由主节点来投票&#xff1b;主节点通过注册zookeeper的临时节点来选举--主节点需要同步从节点的信息正常工作机制--各个节点&#xff08;包括主节点本身&#xff09;在执行任务之前询问主节点&#xf…...

编程日记 2023/8/1 21:38:28

【C++】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值

[导读]本系列博文内容链接如下&#xff1a; 【C】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值 【C】做一个飞机空战小游戏(二)——利用getch()函数实现键盘控制单个字符移动 【C】【C】做一个飞机空战小游戏(三)——模块化程设设计 最近想用c做一个小游戏&#x…...

编程日记 2023/8/1 21:37:27

Spring项目整合策略模式~实战应用

需求背景 1、在管控流程中&#xff0c;涉及到的业务操作很多&#xff0c;不同的业务具有不同的策略实现 举个具体的例子&#xff1a; 在比价管控流程中&#xff0c;有比价策略和管控策略&#xff0c;每个业务的比价和管控均不一样。因此使用策略模式来开发 整体架构流程 1、…...

编程日记 2023/8/1 21:36:25

mybatis PageHelper的坑---记录

记录下&#xff0c;自己新开了一个kotlin的项目从而替换java项目&#xff0c;同时升级了部分组件&#xff0c;包括pageHelper&#xff0c;以往代码里有动态sql的配置 //通过不为null的属性查找数据 val tmpResult: List<Map<String?, Any?>> sqlSessionTemplat…...

编程日记 2023/8/1 21:35:21

uniapp微信小程序下载文件并打开

uni.downloadFile({url: 下载的地址,success(res) {console.log(res)if (res.statusCode 200) {console.log(下载成功);var filePath encodeURI(res.tempFilePath);uni.openDocument({filePath: filePath,fileType: "xlsx",showMenu: true,success: function(res) …...

编程日记 2023/8/1 21:34:20

安卓Intent打开系统进程汇总

1&#xff1a;拨打电话 val uri Uri.parse("tel:10086")val intent Intent(Intent.ACTION_DIAL,uri)startActivity(intent) 2&#xff1a;发送短信 val smsUri Uri.parse("smsto:10086")val intent1 Intent(Intent.ACTION_SENDTO,smsUri)intent1.putE…...

编程日记 2023/8/1 21:33:19

python学习(廖雪峰的官方网站部分，自学笔记)

python学习 廖雪峰的官方网站强烈推荐 字符串 Python提供了ord()函数获取字符的整数表示&#xff0c;chr()函数把编码转换为对应的字符 ord( )先当与把字符转成整形&#xff0c;chr( ) 把编码转化成相应的字符 有些时候&#xff0c;字符串里面的%是一个普通字符怎么办&…...

编程日记 2023/8/1 21:32:16

python题-检查该字符串的括号是否成对出现

给定一个字符串&#xff0c;里边可能包含“()”、"{}"两种括号&#xff0c;请编写程序检查该字符串的括号是否成对出现。 输出&#xff1a; true&#xff1a;代表括号成对出现并且嵌套正确&#xff0c;或字符串无括号字符。 false&#xff1a;未正确使用括号字符。 …...

编程日记 2023/8/1 21:31:15

3ds Max建模教程：模拟布料拖拽撕裂和用剑撕裂两种效果

推荐&#xff1a; NSDT场景编辑器 助你快速搭建可二次开发的3D应用场景 1. 拖拽撕布 步骤 1 打开 3ds Max。 打开 3ds Max 步骤 2 在透视视口中创建平面。保持其长度 后座和宽度后座为 100。 创建平面 步骤 3 转到助手>假人并在 飞机的两侧。 助手>假人 步骤 4 选…...

编程日记 2023/8/1 21:30:14

数据可视化（4）散点图及面积图

1.简单散点图 #散点图 #scatter(x,y) x数据&#xff0c;y数据 x[i for i in range(10)] y[random.randint(1,10) for i in range(10)] plt.scatter(x,y) plt.show()2.散点图分析 #分析广告支出与销售收入相关性 dfcarpd.read_excel(广告支出.xlsx) dfdatapd.read_excel(销售…...

编程日记 2023/8/1 21:29:11

Redis - 数据过期策略

Redis提供了两种数据过期策略 惰性删除 和 定期删除 惰性删除 当某个key过期时&#xff0c;不马上删除&#xff0c;而是在调用时&#xff0c;再判断它是否过期&#xff0c;如果过期再删除它 优点 &#xff1a; 对CPU友好&#xff0c;对于很多用不到的key&#xff0c;不用浪费…...

编程日记 2023/8/1 21:28:10

英文论文（sci）解读复现:基于YOLOv5的自然场景下苹果叶片病害实时检测

对于目标检测算法改进&#xff0c;但是应用于什么场景&#xff0c;需要什么改进方法对应与自己的应用场景有效果&#xff0c;并且多少改进点能发什么水平的文章&#xff0c;为解决大家的困惑&#xff0c;此系列文章旨在给大家解读发表高水平学术期刊中的SCI论文&#xff0c;并对…...

编程日记 2023/8/1 21:27:09

【Liux下6818开发板(ARM)】实现简易相册

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…...

编程日记 2023/8/1 21:26:07

Kubernetes(K8s)从入门到精通系列之六：K8s的基本概念和术语之存储类

Kubernetes K8s从入门到精通系列之六：K8s的基本概念和术语之存储类 一、存储类二、emptyDir三、hostPath四、公有云Volume五、其他类型的Volume六、动态存储管理一、存储类 存储类的资源对象主要包括： VolumePersistent VolumePVCStorageClass基础的存储类资源对象——Volum…...

编程日记 2023/8/1 21:25:02

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/11/3 3:22:48

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/10/14 4:14:14

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/9/11 12:55:04

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2025/10/28 11:52:32

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2025/11/2 11:05:48