没有 JavaScript 计时器的自动播放轮播 - CSS 动画
先看效果：
再看代码（查看更多）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>计时器</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}body {background: #98ede0;transition: background 500ms;font-family: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif;}.content {margin: 0 auto;max-width: 500px;height: 100vh;height: 100svh;min-height: 400px;display: flex;flex-direction: column;padding: 40px 40px 80px;justify-content: center;}a {transition: color 200ms;color: rgba(0, 0, 0, 0.5);border-radius: 5px;text-decoration: none;margin: 40px auto 0;}a:hover {color: black;text-decoration: underline;}a:focus-visible {color: black;outline: 3px solid rgba(255, 255, 255, 0.3);outline-offset: 5px;}.pagination {display: flex;gap: 10px;height: 4px;min-height: 4px;}.pagination-item {border-radius: 100px;height: 100%;flex: auto;background: rgba(0, 0, 0, 0.08);overflow: hidden;border: 0;cursor: pointer;}@keyframes progress {from {width: 0;}to {width: 100%;}}.pagination-progress {flex: auto;background: #333;height: 100%;width: 0;}.pagination-item--running .pagination-progress {animation: progress 3s linear forwards;}.pagination-item--done .pagination-progress {width: 100%;}.pagination--paused .pagination-progress {animation-play-state: paused;}:-moz-window-inactive .pagination-progress {animation-play-state: paused;}.controls {display: flex;justify-content: center;gap: 12px;}.control {display: flex;align-items: center;justify-content: center;border-radius: 100px;border: none;outline: none;height: 40px;flex: 40px 0 0;max-width: 100px;background: rgba(255, 255, 255, 0.3);transition: transform 200ms, background-color 200ms;will-change: transform, background-color;font-size: 20px;}.control:hover {cursor: pointer;transform: scale(1.15);background: rgba(255, 255, 255, 0.45);}.control:focus {background: rgba(255, 255, 255, 0.6);}.icon {width: 20px;}.icon--play {margin-right: -2px;}.pagination--paused ~ .controls .icon--pause,.pagination:not(.pagination--paused) ~ .controls .icon--play {display: none;}.state {font-size: 120px;text-align: center;}</style>
</head>
<body>
<div class="content"><div class="pagination"></div><div class="state"> </div><div class="controls"><button class="control control--prev" aria-label="Previous"><svg class="icon" viewBox="0 0 32 32"><path d="M20 28a1 1 0 0 1-.521-.146l-18-11a1.002 1.002 0 0 1 0-1.708l18-11A.999.999 0 0 1 21 5v6.11a1 1 0 0 1-.479.854L13.918 16l6.603 4.035c.297.182.479.506.479.854V27a1 1 0 0 1-1 1zM3.918 16 19 25.217V21.45l-7.521-4.596a1 1 0 0 1 0-1.707L19 10.55V6.783L3.918 16z" /><path d="M30 28a1 1 0 0 1-.521-.146l-18-11a1.002 1.002 0 0 1 0-1.708l18-11A.999.999 0 0 1 31 5v22a1 1 0 0 1-1 1zM13.918 16 29 25.217V6.783L13.918 16z" /></svg></button><button class="control control--play-pause" aria-label="Play/Pause"><svg class="icon icon--play" viewBox="0 0 32 32"><path d="M7 28a.999.999 0 0 1-1-1V5a1 1 0 0 1 1.521-.854l18 11a1.001 1.001 0 0 1 0 1.708l-18 11A1 1 0 0 1 7 28zM8 6.783v18.434L23.082 16 8 6.783z" /></svg><svg class="icon icon--pause" viewBox="0 0 32 32"><path d="M13 28H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v22a1 1 0 0 1-1 1zm-5-2h4V6H8v20zM25 28h-6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v22a1 1 0 0 1-1 1zm-5-2h4V6h-4v20z" /></svg></button><button class="control control--next" aria-label="Next"><svg class="icon" viewBox="0 0 32 32"><path d="M12 28a1 1 0 0 1-1-1v-6.111c0-.348.182-.672.479-.854L18.082 16l-6.603-4.035A1.001 1.001 0 0 1 11 11.11V5a1 1 0 0 1 1.521-.854l18 11a1.002 1.002 0 0 1 0 1.708l-18 11A1 1 0 0 1 12 28zm1-6.55v3.767L28.082 16 13 6.783v3.767l7.521 4.596a1.001 1.001 0 0 1 0 1.708L13 21.45z" /><path d="M2 28a1 1 0 0 1-1-1V5a1 1 0 0 1 1.521-.854l18 11a1.002 1.002 0 0 1 0 1.708l-18 11A1 1 0 0 1 2 28zM3 6.783v18.434L18.082 16 3 6.783z" /></svg></button></div><a target="_blank" href="https://blog.csdn.net/qq_35241329?type=blog">博客文章</a>
</div>
</body>
<script>"use strict";function getItem(index) {const item = document.createElement('button');item.classList.add('pagination-item');item.addEventListener('animationend', next);item.addEventListener('click', () => update(index));const progress = document.createElement('div');progress.classList.add('pagination-progress');item.appendChild(progress);return item;}function createItems(itemsCount) {const items = [];for (let i = 0; i < itemsCount; i++) {items.push(getItem(i));}return items;}function jumpTo(item) {if (isPaused) {item.classList.remove(classNames.RUNNING);item.classList.add(classNames.DONE);}else {item.classList.add(classNames.RUNNING);item.classList.remove(classNames.DONE);}let sibling = item;while ((sibling = sibling.previousSibling)) {sibling.classList.remove(classNames.RUNNING);sibling.classList.add(classNames.DONE);}sibling = item;while ((sibling = sibling.nextSibling)) {sibling.classList.remove(classNames.RUNNING, classNames.DONE);}}function update(index) {activeIndex = index;jumpTo(items[activeIndex]);// 更新幻灯片和背景颜色$state.innerHTML = activeIndex + 1;document.body.style.backgroundColor = colors[activeIndex];}function prev() {if (activeIndex > 0) {update(activeIndex - 1);}}function next() {if (activeIndex < ITEMS_COUNT - 1) {update(activeIndex + 1);}}function playPause() {$pagination.classList.toggle(classNames.PAUSED);isPaused = !isPaused;///如果当前幻灯片已完成，跳到下一张if (!isPaused && items[activeIndex].classList.contains(classNames.DONE)) {next();}}const colors = ['#98ede0', '#74b9ff', '#a29bfe', '#fd79a8', '#ffeaa7'];const classNames = {RUNNING: 'pagination-item--running',DONE: 'pagination-item--done',PAUSED: 'pagination--paused',};let activeIndex = 0;let isPaused = false;const ITEMS_COUNT = 5;const items = createItems(ITEMS_COUNT);const $pagination = document.querySelector('.pagination');const $state = document.querySelector('.state');const $prev = document.querySelector('.control--prev');const $next = document.querySelector('.control--next');const $playPause = document.querySelector('.control--play-pause');$pagination.replaceChildren(...items);$prev.addEventListener('click', prev);$next.addEventListener('click', next);$playPause.addEventListener('click', playPause);update(activeIndex);</script>
</html>
相关文章：
没有 JavaScript 计时器的自动播放轮播 - CSS 动画
先看效果： 再看代码（查看更多）： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>计时器</title><style>* {padding: 0;margin: 0;box-siz…...
《Flink学习笔记》——第三章 Flink的部署模式
不同的应用场景，有时候对集群资源的分配和占用有不同的需求。所以Flink为各种场景提供了不同的部署模式。 3.1 部署模式（作业角度/通用分类） 根据集群的生命周期、资源的分配方式、main方法到底在哪里执行——客户端还是Client还是JobManage…...
网络安全（黑客技术）0基础学习手册
目录梗概 一、自学网络安全学习的误区和陷阱 二、学习网络安全的一些前期准备 三、网络安全学习路线 四、学习资料的推荐 想自学网络安全（黑客技术）首先你得了解什么是网络安全！什么是黑客！ 网络安全可以基于攻击和防御视角来…...
腾讯云服务器价格表大全_轻量服务器_CVM云服务器报价明细
腾讯云服务器租用费用表：轻量应用服务器2核2G4M带宽112元一年，540元三年、2核4G5M带宽218元一年，2核4G5M带宽756元三年、云服务器CVM S5实例2核2G配置280.8元一年、GPU服务器GN10Xp实例145元7天，腾讯云服务器网长期更新腾讯云轻量…...
vue中bus的使用和涉及到的问题
创建一个js文件 import Vue from "Vue" export default new Vue 我们可以直接在要使用的页面中引用使用 import bus from /assets/js/eventBus.js;bus.$emit("info", "123") // 使用bus.$on("info", (val) > { // 接收console.l…...
Flink的简要概述
以下是Flink的各种架构的简要概述： 1. Flink概述：Apache Flink是一个开源的流处理和批处理框架，具有高性能、容错性和数据一致性保证。它支持事件驱动的流处理和批量处理，并提供了丰富的API和工具来处理实时数据流和大规模数据集…...
多线程下的signal信号处理
多线程中，信号在哪个线程中处理是不确定的，可能被任意一个线程处理 下边的代码可以验证该结论，多次Ctrlc，会被不同的线程捕获此信号，并处理，最终每个线程死锁，阻塞在等待锁的状态 #include &l…...
〖Python网络爬虫实战㉞〗- 图形验证码OCR识别
订阅：新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列（零基础小白搬砖逆袭) 说明：本专栏持续更新中，订阅本专栏前必读关于专栏〖Python网络爬虫实战〗转为付费专栏的订阅说明作者࿱…...
Python Scrapy网络爬虫框架从入门到实战
Python Scrapy是一个强大的网络爬虫框架，它提供了丰富的功能和灵活的扩展性，使得爬取网页数据变得简单高效。本文将介绍Scrapy框架的基本概念、用法和实际案例，帮助你快速上手和应用Scrapy进行数据抓取。 Scrapy是一个基于Python的开源网络爬…...
后端面试话术集锦第四篇：ElasticSearch面试话术
🚗后端面试集锦目录 💖后端面试话术集锦第 1 篇：spring面试话术💖 💖后端面试话术集锦第 2 篇：spring boot面试话术💖 💖后端面试话术集锦第 3 篇：spring cloud面试话术💖 💖后端面试话术集锦第 4 篇：ElasticSearch面试话术💖 💖后端面试话术集锦第 5 …...
C++之ifstream成员函数get、tellg、eof实例(一百八十五)
简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言： 人生…...
安卓webview，网页端生成安卓项目（极速生成）教程
安卓webview，网页端生成安卓项目（极速生成）教程 一，前言 当自己做了一个PC端的页面，也就是前端的页面，或者已经上服的页面，但也想生成一个安卓端供用户使用，本教程详细讲解如何把前…...
如何在vscode导入下载的插件安装包
点击vscode插件 --> 点击3个点 --> 选择从VSIX安装 点击更新报 Cannot update while running on a read-only volume. The application is on a read-only volume. Please move the application and try again. If you’re on macOS Sierra or later, you’ll need to m…...
springboot 多线程实战
先说下业务场景，业务1：基于实时轨迹数据打卡，业务2：基于非实时轨迹的时间差，计算累计时长。 简单点说就是从websocket获取到的实时数据，既要兼容不耗时操作，又要兼容耗时操作。 单线程做的话&a…...
求生之路2社区服务器sourcemod安装配置搭建教程centos
求生之路2社区服务器sourcemod安装配置搭建教程centos 大家好我是艾西，通过上文我们已经成功搭建了求生之路2的服务端。但是这个服务端是纯净的服务端，就是那种最纯粹的原版。如果想要实现插件、sm开头的命令等功能，需要安装这个sourcemod。…...
通达OAV12版本，表单及流程，定制开发总结
通达OA-V12版本，表单及流程，定制开发总结 触发器金蝶系统对接 日期：2023年8月29日 触发器 一键转交操作，不会调用触发器。 解决办法：可以按需要按步骤，关闭一键转交按钮。这里会隐藏一键转交、一键结束按钮…...
浅析Linux 物理内存外碎片化
本文出现的内核代码来自Linux4.19，如果有兴趣，读者可以配合代码阅读本文。 一、Linux物理内存外碎片化概述 什么是Linux物理内存碎片化？Linux物理内存碎片化包括两种： 1.物理内存内碎片：指分配给用户的内存空间中未…...
C#中的get和set
当我们定义属性的 get 访问器和 set 访问器时，其中的 return 和 value 分别代表以下含义： return：在 get 访问器中使用，表示返回属性的值给调用方。它用于将属性关联的字段的值返回给外部代码。value：在 set 访问器中…...
mysql8.0以上忘记密码的重置方法 - window系统
1、关闭 mysql 服务，以 管理员身份 运行命令提示符工具，执行下面的命令 net stop mysql可以在任务管理器的服务中查看状态 2、跳过 mysql 权限验证，以管理员身份运行 cmd，进入 mysql 的安装 bin 目录，执行如下指令 m…...
手写Vue3响应式数据原理
Vue3响应式数据 前言一、proxy是什么？1.1 proxy基本使用 二、实现最基本的reactive函数三、实现基本响应式系统四、完善基本响应式系统4.1 执行每一个副作用函数4.2 实现依赖收集4.2.1 基本实现 4.3 改进桶结构 五、相关面试题1.Object.defineProperty 和 Proxy 的区…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序（Program） 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序，比如我们使用QQ，就启动了一个进程，操作系统就会为该进程分配内存…...
适应性Java用于现代 API：REST、GraphQL 和事件驱动
在快速发展的软件开发领域，REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名，不断适应这些现代范式的需求。随着不断发展的生态系统，Java 在现代 API 方…...
 Module Federation：Webpack.config.js文件中每个属性的含义解释)
MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释
以Module Federation 插件详为例，Webpack.config.js它可能的配置和含义如下： 前言 Module Federation 的Webpack.config.js核心配置包括： name filename（定义应用标识） remotes（引用远程模块࿰…...
CppCon 2015 学习:Time Programming Fundamentals
Civil Time 公历时间 特点： 共 6 个字段： Year（年）Month（月）Day（日）Hour（小时）Minute（分钟）Second（秒） 表示…...