前端js--旋转幻灯片
效果图
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>旋转幻灯片</title></head><body><div class="slider"><div class="slide visible"><img src="img/img1.jpeg" alt="" /></div><div class="slide"><img src="img/img2.jpeg" alt="" /></div><div class="slide"><img src="img/img3.jpeg" alt="" /></div><div class="slide"><img src="img/img4.jpeg" alt="" /></div><div class="slide"><img src="img/img5.jpeg" alt="" /></div></div><script>const slider = document.querySelector(".slider");const slides = document.querySelectorAll(".slide");let activeSlide = 0;function changeSlide() {slides[activeSlide].classList.remove("visible");activeSlide++;if (activeSlide >= slides.length) {activeSlide = 0;}slides[activeSlide].classList.add("visible");}slider.addEventListener("animationstart", () => {setInterval(changeSlide, 2000);});</script></body>
</html>
* {box-sizing: border-box;
}body {background-color: #333;display: flex;align-items: center;justify-content: center;height: 100vh;margin: 0;perspective: 1000px;
}.slider {position: relative;height: 500px;width: 500px;transform-style: preserve-3d;animation: rotate 4s linear infinite;
}.slide {opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
.slide img {width: 100%;height: 100%;object-fit: cover;
}.slide.visible {opacity: 1;
}@keyframes rotate {0% {transform: rotateY(90deg);}50% {transform: rotateY(270deg);}100% {transform: rotateY(450deg);}
}@media (max-width: 500px) {.slider {width: 280px;height: 280px;}
}
配图
相关文章：
前端js--旋转幻灯片
效果图 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><link rel"stylesheet" href"…...
解决mvn clean install遇到testng单元测试失败时打包也失败的问题
解决mvn clean install遇到testng单元测试失败时打包也失败的问题 看这个之前请先看这个 Jenkins执行Testng 比如我现在就有一个单元测试失败的项目 执行mvn clean install的时候就会报错 下面是我现在的pom.xml 但我们不希望这样，怎么办 <plugin><gr…...
RISC-V基础之函数调用（二）栈与寄存器（包含实例）
堆栈是一种后进先出（LIFO）的队列，用于存储函数调用时的临时数据和现场数据。堆栈指针sp（寄存器2）是一个普通的RISC-V寄存器，按照惯例，指向堆栈的顶部。堆栈从高地址向低地址增长，即当…...
解析器模式（C++）
定义 给定一个语言，定义它的文法的一种表示，并定义一种解释器，这个解释器使用该表示来解释语言中的句子。 应用场景 在软件构建过程中，如果某一特定领域的问题比较复杂，类似的结构不断重复出现，如果使用…...
)
电子元器件选型与实战应用—02 电容选型第1篇(8000字)
文章目录 0. 电阻选型案例回顾1. 入门知识1.1 基础1.2 串并联1.3 常用容值1.4 常用品牌2. 参数详解2.1 静电容量2.2 额定电压2.3 精度2.4 漏电流和绝缘电阻2.5 ESR3. 电容种类3.1 陶瓷电容3.1.1 陶瓷电容优缺点3.1.2 容量和电压的关系3.1.3 陶瓷电容的介质3.1.4 容量和温度的关…...
试图将更改推送到 GitHub，但是远程仓库已经包含了您本地没有的工作（可能是其他人提交的修改）
这通常是由于其他人或其他仓库推送到了相同的分支上，导致您的本地仓库和远程仓库之间存在冲突。 错误信息： To github.com:8upersaiyan/CKmuduo.git ! [rejected] main -> main (fetch first) error: failed to push some refs to github.com:8upers…...
Lamport向量时钟算法的C++实现：在分布式系统中生成事件的部分排序并检测因果关系违规
在处理分布式系统时，我们经常遇到的一个问题是如何跟踪和排序系统中发生的各种事件。这是一个非常重要的问题，因为在分布式系统中，事件的顺序可能会影响系统的行为和结果。为了解决这个问题，我们可以使用一种称为向量时钟的算法。…...
多个excel的sheet合并到一个excel下
目标：多个excel的sheet合并到一个excel下（不同sheet） 要求：原始数据不同excel中的sheet名不同 import pandas as pd import os# 多个Excel文件所在的文件夹路径 folder_path r"D:\data\sheet"# 输出合并后的Excel文件…...
【Fegin技术专题】「原生态」打开Fegin之RPC技术的开端，你会使用原生态的Fegin吗？(中)
你可以使用 Jersey 和 CXF 这些来写一个 Rest 或 SOAP 服务的java客服端。 你也可以直接使用 Apache HttpClient 来实现。但是 Feign 的目的是尽量的减少资源和代码来实现和 HTTP API 的连接。 *通过自定义的编码解码器以及错误处理，你可以编写任何基于文本的 HTT…...
)
leetcode--每日一题--822--344(使用异或来进行数据交换)
822.翻转卡片游戏 在桌子上有 n 张卡片，每张卡片的正面和背面都写着一个正数（正面与背面上的数有可能不一样）。 我们可以先翻转任意张卡片，然后选择其中一张卡片。 如果选中的那张卡片背面的数字 x 与任意一张卡片的正面的数字都…...
OpenStreetMap数据转3D场景【Python + PostgreSQL】
很长一段时间以来，我对 GIS 和渲染感兴趣，在分别尝试这两者之后，我决定最终尝试以 3D 方式渲染 OpenStreetMap 中的地理数据，重点关注不超过城市的小规模。 在本文中，我将介绍从建筑形状生成三角形网格、以适合 Blend…...
动力节点|MyBatis入门实战到深入源码
MyBatis是一种简单易用、灵活性高且高性能的持久化框架，也是Java开发中不可或缺的一部分。 动力节点老杜的MyBatis教程，上线后广受好评 从零基础小白学习的角度出发，层层递进 从简单到深入，从实战到源码 一步一案例，一…...
分布式规则引擎框架的设计
MirAIe 规则引擎是一个可扩展且可扩展的规则引擎框架，允许用户对多个活动进行分组和自动化。 过去几年，在开发MirAIe 物联网平台时，我们意识到需要一个可扩展、可扩展的规则引擎框架。规则引擎使您能够对各种操作进行分组、管理和自动化&…...
 FFmpeg推送udp组播流)
C#开发FFMPEG例子(API方式) FFmpeg推送udp组播流
代码及工程见https://download.csdn.net/download/daqinzl/88156926 开发工具：visual studio 2019 播放，可采用ffmpeg工具集里的ffplay.exe, 执行命令 ffplay udp://238.1.1.10:6016 也可以参考(C#开发FFMPEG例子(API方式) FFmpeg拉取udp组播流并播放)…...
nvm下载node导致npm报错无法使用
有个依赖库需要更新下node，用nvm下载后项目跑不起来了，npm -v 还报错 其实一开始是npm下载不来，然后换了淘宝镜像后还是报错 然后就只能手动下载下了 进入node.js官网 https://nodejs.org/en/download 下载后注意要安装在你nvm目录中&#x…...
LeetCode 热题 100JavaScript--2. 两数相加
给你两个 非空 的链表，表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的，并且每个节点只能存储 一位 数字。 请你将两个数相加，并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外，这两个数都不会以 0 …...
zookeeper总结
1.概念 Zookeeper 是一个分布式协调服务，可用于服务发现，分布式锁，分布式领导选举，配置管理等。Zookeeper 提供了一个类似于 Linux 文件系统的树形结构（可认为是轻量级的内存文件系统，但只适合存少量信息&…...
【程序环境与预处理玩转指南】
本章重点： 程序的翻译环境 程序的执行环境 详解：C语言程序的编译链接 预定义符号介绍 预处理指令 #define 宏和函数的对比 预处理操作符#和##的介绍 命令定义 预处理指令 #include 预处理指令 #undef 条件编译 1. 程序的翻译环境和执行环境 在…...
搭建简易syslog日志中转服务器
在某种场景下，无法接入日志审计设备，本文提供一种方式，可通过搭建简易日志中转服务器，收集到该环境下的日志后，再将其导入日志审计设备中。 0x1 开启服务 rsyslog守护进程来自于当前的linux发布版本的预装模块&#x…...
MongoDB文档-进阶使用-spring-boot整合使用MongoDB---MongoRepository完成增删改查
阿丹： 之前学习了在MongoDB客户端上的MongoDB语句现在将MongoDB整合到spring项目。 传送门： MongoDB文档--基本概念_一单成的博客-CSDN博客 MongoDB文档--基本安装-linux安装（mongodb环境搭建）-docker安装（挂载数据卷…...
多模态2025：技术路线“神仙打架”，视频生成冲上云霄
文｜魏琳华 编｜王一粟 一场大会，聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令： return <value>;在收到客户端连接后，立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量（如 $time_iso8601、$remote_addr 等）&a…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如 中文，英文，日语），语音情感（如 开心，悲伤）&#x…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。 方法一：使用 XML 的 <foreach> 标签ÿ…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求，本次涉及的主要是收费汇聚交换机的配置，浪潮网络设备在高速项目很少，通…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下，风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
LabVIEW双光子成像系统技术
双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制，展现出显著的技术优势： 深层组织穿透能力：适用于活体组织深度成像 高分辨率观测性能：满足微观结构的精细研究需求 低光毒性特点：减少对样本的损伤…...
【Linux】自动化构建-Make/Makefile
前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具：make/makfile 1.背景 在一个工程中源文件不计其数，其按类型、功能、模块分别放在若干个目录中，mak…...