HTML+CSS+JavaScript：轮播图自动播放
一、需求
轮播图如下图所示，需求是每隔一秒轮播图自动切换一次
二、代码素材
以下是缺失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 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、获取相关元素
3、利用间歇函数实现一秒切换一次的功能，间歇函数中的计数器 i 配合素材代码中的数组对象实现图片和文字等样式的顺序播放
四、完整代码
<!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 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=0setInterval(()=>{i = (i + 1) % 8img.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')},1000)</script>
</body></html>相关文章：
HTML+CSS+JavaScript：轮播图自动播放
一、需求 轮播图如下图所示，需求是每隔一秒轮播图自动切换一次 二、代码素材 以下是缺失JS部分的代码，感兴趣的小伙伴可以先自己试着写一写 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /&…...
python 自动化数据提取之正则表达式
>>>> 前 言 我们在做接口自动化的时候，处理接口依赖的相关数据时，通常会使用正则表达式来进行提取相关的数据，今天在这边和大家聊聊如何在python中使用正则表达式。 正则表达式，又称正规表示式、正规表示法、正规…...
分布式事务之本地事务
🚀 分布式事务 🚀 🌲 AI工具、AI绘图、AI专栏 🍀 🌲 如果你想学到最前沿、最火爆的技术，赶快加入吧✨ 🌲 作者简介：硕风和炜，CSDN-Java领域优质创作者🏆&…...
PyTorch 初级教程：构建你的第一个神经网络
PyTorch 是一个在研究领域广泛使用的深度学习框架，提供了大量的灵活性和效率。本文将向你介绍如何使用 PyTorch 构建你的第一个神经网络。 一、安装 PyTorch 首先，我们需要安装 PyTorch。PyTorch 的安装过程很简单，你可以根据你的环境&…...
SpringBoot使用MyBatis Plus + 自动更新数据表
1、Mybatis Plus介绍 Mybatis，用过的都知道，这里不介绍，mybatis plus只是在mybatis原来的基础上做了些改进，增强了些功能，增强的功能主要为增加更多常用接口方法调用，减少xml内sql语句编写，也可…...
【设计模式】简单工厂模式
C语言实现简单的工厂模式 #include <stdio.h> #include <stdlib.h>// 图形类型枚举 typedef enum {CIRCLE,SQUARE,RECTANGLE } ShapeType;// 图形结构体 typedef struct {ShapeType type;float area; } Shape;// 创建圆形 Shape* createCircle() {Shape* circle …...
推荐系统-ALS协同过滤算法实现
从协同过滤的分类来说，ALS（Alternating Least Squares，交替最小二乘）算法属于User-Item CF，也叫做混合CF，它同时考虑了User和Item两个方面，通过数量相对少的未被观察到的隐藏因子，来…...
QT第三讲
思维导图 蜡笔小新闹钟 需求： 实现 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTime> //时间类 #include<QTimerEvent> //事件处理类 #include<QtTextToSpeech> //文本转语音类 #include<QMessageBo…...
Linux内核的I2C驱动框架详解------这应该是我目前600多篇博客中耗时最长的一篇博客
目录 1 I2C驱动整体框架图 2 I2C控制器 2.1 I2C控制器设备--I2C控制器在内核中也被看做一个设备 2.2 i2c控制器驱动程序 2.3 platform_driver结构体中的probe函数做了什么 2.3.1 疑问： i2cdev_notifier_call函数哪里来的 2.3.2 疑问：为什么有两…...
【点云处理教程】05-Python 中的点云分割
一、说明 这是我的“点云处理”教程的第 5 篇文章。“点云处理”教程对初学者友好，我们将在其中简单地介绍从数据准备到数据分割和分类的点云处理管道。 在上一教程中，我们看到了如何过滤点云以减少噪声或其密度。在本教程中，我们将应用一些聚…...
代码随想录算法训练营之JAVA｜第十七天| 654. 最大二叉树
今天是第17天刷leetcode，立个flag，打卡60天。 算法挑战链接 654. 最大二叉树https://leetcode.cn/problems/maximum-binary-tree/description/ 第一想法 错误的想法，就不说了。 看完代码随想录之后的想法 用递归模拟真实的过程 如果我…...
C++重写函数、隐藏函数、重载函数的区别对比
目录 1.函数重载 1.1定义 1.2函数重载的规则： 1.3函数重载的作用： 2.函数重写： 2.1定义 2.2例子： 3.函数隐藏 3.1定义 3.2举个例子： 1.函数重载 1.1定义 我们在学类和对象的封装特性时学过一个词叫重载，…...
15.python设计模式【函数工厂模式】
1.知识讲解 内容：定义一个字典，在python中一切皆对象，将所有的函数进行封装，然后定一个分发函数进行分发，将原来if…else全部干掉。角色： 函数（function）函数工厂（funct…...
Redis主从复制、哨兵、cluster集群原理+实验
目录 一、Redis 主从复制 1、主从复制的作用 2、主从复制流程 3、搭建Redis 主从复制 安装Redis（所有主机) 修改Master节点Redis配置文件 修改Slave节点Redis配置文件 验证主从效果 一、Redis 主从复制 主从复制，是指将一台Redis服务器的数据&am…...
微信小程序如何实现页面传参？
前言 只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递，下面我总结了 4 种页面方法。 路径传递 通过在url后面拼接参数，参数与路径之间使用 ? 分隔，参数键与参数值用 相连，不同参数用 & 分隔；如…...
OPC DA 客户端与服务器的那点事
C#开发OPC客户端，使用OPCDAAuto.dll。在开发过程中偶遇小坎坷，主要记录一下问题解决办法。 1、建立客户端，参考链接。建立WinFrom工程，将博客中代码全部复制即可运行： https://www.cnblogs.com/kjgagaga/p/17011730.…...
Java 错误异常介绍(Exceptions)
1、异常介绍 异常是程序执行期间发生的意外事件。它影响程序指令流，从而导致程序异常终止。 发生异常的原因有很多。其中包括： 无效的用户输入 设备故障 网络连接丢失 物理限制（磁盘内存不足） 代码错误 打开一个不可用的文…...
每日一题——旋转数组的最小数字
题目 有一个长度为 n 的非降序数组，比如[1,2,3,4,5]，将它进行旋转，即把一个数组最开始的若干个元素搬到数组的末尾，变成一个旋转数组，比如变成了[3,4,5,1,2]，或者[4,5,1,2,3]这样的。请问，给定这…...
SpringBoot Jackson 日期格式化统一配置
目录 1.在全局配置文件配置 2.通过JavaBean方式配置 1.在全局配置文件配置 spring:jackson:date-format: yyyy-MM-dd HH:mm:sstime-zone: GMT8 该配置方式仅支持 Date 类型的日期格式化，不支持LocalDate 及 LocalDateTime 的格式化。 2.通过JavaBean方式配置 …...
剑指 Offer 38. 字符串的排列 / LeetCode 47. 全排列 II（回溯法）
题目： 链接：剑指 Offer 38. 字符串的排列 难度：中等 输入一个字符串，打印出该字符串中字符的所有排列。 你可以以任意顺序返回这个字符串数组，但里面不能有重复元素。 示例: 输入：s “abc” 输出&…...
Aurora框架解析：一体化高性能云原生开发平台的设计与实践
1. 项目概述与核心价值如果你在开源社区里混迹过一段时间，尤其是对现代化、高性能的Web开发框架感兴趣，那么“Aurora”这个名字你大概率不会陌生。它不是一个简单的库或者工具，而是一个由社区驱动的、旨在构建下一代企业级应用开发平台的雄心…...
Redis增强工具包：封装分布式锁、缓存模板与监控的最佳实践
1. 项目概述：一个Redis开发者的“瑞士军刀”在分布式系统和高并发场景下，Redis几乎成了标配。但用久了你会发现，官方客户端虽然稳定，但在日常开发、调试、运维中，总有些“不够顺手”的地方。比如，想批量按模…...
基于LLM与视觉模型融合的智能体框架：从原理到工业质检实践
1. 项目概述：当AI学会“看”与“想”最近在探索AI与视觉结合的落地场景时，我深度体验了landing-ai/vision-agent这个项目。它不是一个简单的图像识别工具，而是一个试图让AI具备“视觉推理”能力的智能体框架。简单来说，它让AI不仅…...
OpenClawTuto：从零构建高可靠GUI自动化脚本的工程实践指南
1. 项目概述与核心价值 最近在GitHub上看到一个挺有意思的项目，叫“OpenClawTuto”。光看名字，你可能会有点懵，这“OpenClaw”是啥？是开源爪子？还是某种工具？其实，这是一个围绕“OpenClaw”这个…...
ViewTurbo：基于响应式依赖追踪的前端渲染优化方案
1. 项目概述与核心价值最近在折腾一个挺有意思的开源项目，叫 ViewTurbo。这名字听起来就带点“涡轮增压”的劲儿，事实上，它也确实是一个旨在为视图渲染“加速”的工具。简单来说，ViewTurbo 的核心目标，是解决在复杂前端…...
ARM Jazelle技术：硬件加速Java字节码执行详解
1. ARM Jazelle技术概述Jazelle技术是ARM架构中用于硬件加速Java字节码执行的关键扩展，最早出现在ARMv5TE架构中。这项技术通过在处理器内部集成Java字节码执行单元，实现了Java虚拟机(JVM)功能的硬件化。与传统的软件解释器相比，Jazelle能够将…...
Java——定时任务
定时任务1、Timer和TimerTask1.1、基本用法1.2、基本示例1.3、基本原理1.4、死循环1.5、异常任务1.6、总结2、ScheduledExecutorService2.1、基本用法2.2、基本示例2.3、基本原理在Java中，主要有两种方式实现定时任务： 使用java.util包中的Timer和Timer…...
告别3D-DNA的卡顿：用Chromap+Yahs快速搞定植物Hi-C辅助组装（附完整代码）
植物基因组Hi-C辅助组装新方案：ChromapYahs全流程解析 在植物基因组研究中，Hi-C技术已成为提升组装连续性的重要手段。然而传统3D-DNA流程在植物数据上的表现常令研究者头疼——运行速度缓慢、内存占用高，且对植物特有的重复序列处理效果欠佳…...
基于WebRTC的P2P远程控制工具vibe-remote部署与实战
1. 项目概述：一个远程控制的开源解决方案最近在折腾智能家居和远程设备管理，发现很多场景下，我们需要的并不是一个功能大而全的远程桌面软件，而是一个轻量、快速、能穿透内网的远程控制工具。比如，家里的NAS需要临时重…...
RT-Thread SMP启动流程深度解析：从多核同步到调度就绪
1. 项目概述：从单核到多核，RT-Thread的启动逻辑变迁如果你是从RT-Thread 3.x版本一路用过来的老用户，或者刚开始接触RT-Thread 4.x，可能会发现一个显著的变化：启动流程变“复杂”了。以前，一个main函数或者…...