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

没有 JavaScript 计时器的自动播放轮播 - CSS 动画

news 2026/2/9 23:52:02

先看效果：
在这里插入图片描述
再看代码（查看更多）：

<!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">&nbsp;</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 动画

先看效果&#xff1a; 再看代码&#xff08;查看更多&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>计时器</title><style>* {padding: 0;margin: 0;box-siz…...

编程日记 2023/8/29 21:41:29

《Flink学习笔记》——第三章 Flink的部署模式

不同的应用场景&#xff0c;有时候对集群资源的分配和占用有不同的需求。所以Flink为各种场景提供了不同的部署模式。 3.1 部署模式&#xff08;作业角度/通用分类&#xff09; 根据集群的生命周期、资源的分配方式、main方法到底在哪里执行——客户端还是Client还是JobManage…...

编程日记 2023/8/29 21:40:28

网络安全（黑客技术）0基础学习手册

目录梗概 一、自学网络安全学习的误区和陷阱 二、学习网络安全的一些前期准备 三、网络安全学习路线 四、学习资料的推荐 想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01; 网络安全可以基于攻击和防御视角来…...

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

腾讯云服务器价格表大全_轻量服务器_CVM云服务器报价明细

腾讯云服务器租用费用表&#xff1a;轻量应用服务器2核2G4M带宽112元一年&#xff0c;540元三年、2核4G5M带宽218元一年&#xff0c;2核4G5M带宽756元三年、云服务器CVM S5实例2核2G配置280.8元一年、GPU服务器GN10Xp实例145元7天&#xff0c;腾讯云服务器网长期更新腾讯云轻量…...

编程日记 2023/8/29 21:38:25

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…...

编程日记 2023/8/29 21:37:23

Flink的简要概述

以下是Flink的各种架构的简要概述&#xff1a; 1. Flink概述&#xff1a;Apache Flink是一个开源的流处理和批处理框架&#xff0c;具有高性能、容错性和数据一致性保证。它支持事件驱动的流处理和批量处理&#xff0c;并提供了丰富的API和工具来处理实时数据流和大规模数据集…...

编程日记 2023/8/29 21:36:22

多线程下的signal信号处理

多线程中&#xff0c;信号在哪个线程中处理是不确定的&#xff0c;可能被任意一个线程处理 下边的代码可以验证该结论&#xff0c;多次Ctrlc&#xff0c;会被不同的线程捕获此信号&#xff0c;并处理&#xff0c;最终每个线程死锁&#xff0c;阻塞在等待锁的状态 #include &l…...

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

〖Python网络爬虫实战㉞〗- 图形验证码OCR识别

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;订阅本专栏前必读关于专栏〖Python网络爬虫实战〗转为付费专栏的订阅说明作者&#xff1…...

编程日记 2023/8/29 21:34:19

Python Scrapy网络爬虫框架从入门到实战

Python Scrapy是一个强大的网络爬虫框架&#xff0c;它提供了丰富的功能和灵活的扩展性&#xff0c;使得爬取网页数据变得简单高效。本文将介绍Scrapy框架的基本概念、用法和实际案例&#xff0c;帮助你快速上手和应用Scrapy进行数据抓取。 Scrapy是一个基于Python的开源网络爬…...

编程日记 2023/8/29 21:33:18

后端面试话术集锦第四篇：ElasticSearch面试话术

🚗后端面试集锦目录 💖后端面试话术集锦第 1 篇：spring面试话术💖 💖后端面试话术集锦第 2 篇：spring boot面试话术💖 💖后端面试话术集锦第 3 篇：spring cloud面试话术💖 💖后端面试话术集锦第 4 篇：ElasticSearch面试话术💖 💖后端面试话术集锦第 5 …...

编程日记 2023/8/29 21:32:15

C++之ifstream成员函数get、tellg、eof实例(一百八十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…...

编程日记 2023/8/29 21:31:14

安卓webview，网页端生成安卓项目（极速生成）教程

安卓webview&#xff0c;网页端生成安卓项目&#xff08;极速生成&#xff09;教程 一&#xff0c;前言 当自己做了一个PC端的页面&#xff0c;也就是前端的页面&#xff0c;或者已经上服的页面&#xff0c;但也想生成一个安卓端供用户使用&#xff0c;本教程详细讲解如何把前…...

编程日记 2023/8/29 21:30:13

如何在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…...

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

springboot 多线程实战

先说下业务场景&#xff0c;业务1&#xff1a;基于实时轨迹数据打卡&#xff0c;业务2&#xff1a;基于非实时轨迹的时间差&#xff0c;计算累计时长。 简单点说就是从websocket获取到的实时数据&#xff0c;既要兼容不耗时操作&#xff0c;又要兼容耗时操作。 单线程做的话&a…...

编程日记 2023/8/29 21:28:09

求生之路2社区服务器sourcemod安装配置搭建教程centos

求生之路2社区服务器sourcemod安装配置搭建教程centos 大家好我是艾西&#xff0c;通过上文我们已经成功搭建了求生之路2的服务端。但是这个服务端是纯净的服务端&#xff0c;就是那种最纯粹的原版。如果想要实现插件、sm开头的命令等功能&#xff0c;需要安装这个sourcemod。…...

编程日记 2023/8/29 21:27:08

通达OAV12版本，表单及流程，定制开发总结

通达OA-V12版本&#xff0c;表单及流程&#xff0c;定制开发总结 触发器金蝶系统对接 日期&#xff1a;2023年8月29日 触发器 一键转交操作&#xff0c;不会调用触发器。 解决办法&#xff1a;可以按需要按步骤&#xff0c;关闭一键转交按钮。这里会隐藏一键转交、一键结束按钮…...

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

浅析Linux 物理内存外碎片化

本文出现的内核代码来自Linux4.19&#xff0c;如果有兴趣&#xff0c;读者可以配合代码阅读本文。 一、Linux物理内存外碎片化概述 什么是Linux物理内存碎片化&#xff1f;Linux物理内存碎片化包括两种&#xff1a; 1.物理内存内碎片&#xff1a;指分配给用户的内存空间中未…...

编程日记 2023/8/29 21:25:05

C#中的get和set

当我们定义属性的 get 访问器和 set 访问器时&#xff0c;其中的 return 和 value 分别代表以下含义&#xff1a; return&#xff1a;在 get 访问器中使用&#xff0c;表示返回属性的值给调用方。它用于将属性关联的字段的值返回给外部代码。value&#xff1a;在 set 访问器中…...

编程日记 2023/8/29 21:24:04

mysql8.0以上忘记密码的重置方法 - window系统

1、关闭 mysql 服务&#xff0c;以 管理员身份 运行命令提示符工具&#xff0c;执行下面的命令 net stop mysql可以在任务管理器的服务中查看状态 2、跳过 mysql 权限验证&#xff0c;以管理员身份运行 cmd&#xff0c;进入 mysql 的安装 bin 目录&#xff0c;执行如下指令 m…...

编程日记 2023/8/29 21:23:03

手写Vue3响应式数据原理

Vue3响应式数据 前言一、proxy是什么&#xff1f;1.1 proxy基本使用 二、实现最基本的reactive函数三、实现基本响应式系统四、完善基本响应式系统4.1 执行每一个副作用函数4.2 实现依赖收集4.2.1 基本实现 4.3 改进桶结构 五、相关面试题1.Object.defineProperty 和 Proxy 的区…...

编程日记 2023/8/29 21:22:01

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2026/1/31 7:23:48

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2026/2/2 7:49:59

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2026/1/28 3:04:35

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2026/1/25 2:04:42

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/12/11 0:27:15