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

前端js--旋转幻灯片

news 2025/12/27 9:43:01

效果图

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

代码

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

编程日记 2023/8/8 12:20:27

解决mvn clean install遇到testng单元测试失败时打包也失败的问题

解决mvn clean install遇到testng单元测试失败时打包也失败的问题 看这个之前请先看这个 Jenkins执行Testng 比如我现在就有一个单元测试失败的项目 执行mvn clean install的时候就会报错 下面是我现在的pom.xml 但我们不希望这样&#xff0c;怎么办 <plugin><gr…...

编程日记 2023/8/8 12:19:26

RISC-V基础之函数调用（二）栈与寄存器（包含实例）

堆栈是一种后进先出&#xff08;LIFO&#xff09;的队列&#xff0c;用于存储函数调用时的临时数据和现场数据。堆栈指针sp&#xff08;寄存器2&#xff09;是一个普通的RISC-V寄存器&#xff0c;按照惯例&#xff0c;指向堆栈的顶部。堆栈从高地址向低地址增长&#xff0c;即当…...

编程日记 2023/8/8 12:18:24

解析器模式（C++）

定义 给定一个语言&#xff0c;定义它的文法的一种表示&#xff0c;并定义一种解释器&#xff0c;这个解释器使用该表示来解释语言中的句子。 应用场景 在软件构建过程中&#xff0c;如果某一特定领域的问题比较复杂&#xff0c;类似的结构不断重复出现&#xff0c;如果使用…...

编程日记 2023/8/8 12:17:23

电子元器件选型与实战应用—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 容量和温度的关…...

编程日记 2023/8/8 12:16:22

试图将更改推送到 GitHub，但是远程仓库已经包含了您本地没有的工作（可能是其他人提交的修改）

这通常是由于其他人或其他仓库推送到了相同的分支上&#xff0c;导致您的本地仓库和远程仓库之间存在冲突。 错误信息&#xff1a; To github.com:8upersaiyan/CKmuduo.git ! [rejected] main -> main (fetch first) error: failed to push some refs to github.com:8upers…...

编程日记 2023/8/8 12:15:21

Lamport向量时钟算法的C++实现：在分布式系统中生成事件的部分排序并检测因果关系违规

在处理分布式系统时&#xff0c;我们经常遇到的一个问题是如何跟踪和排序系统中发生的各种事件。这是一个非常重要的问题&#xff0c;因为在分布式系统中&#xff0c;事件的顺序可能会影响系统的行为和结果。为了解决这个问题&#xff0c;我们可以使用一种称为向量时钟的算法。…...

编程日记 2023/8/8 12:14:20

多个excel的sheet合并到一个excel下

目标&#xff1a;多个excel的sheet合并到一个excel下&#xff08;不同sheet&#xff09; 要求&#xff1a;原始数据不同excel中的sheet名不同 import pandas as pd import os# 多个Excel文件所在的文件夹路径 folder_path r"D:\data\sheet"# 输出合并后的Excel文件…...

编程日记 2023/8/8 12:13:18

【Fegin技术专题】「原生态」打开Fegin之RPC技术的开端，你会使用原生态的Fegin吗？(中)

你可以使用 Jersey 和 CXF 这些来写一个 Rest 或 SOAP 服务的java客服端。 你也可以直接使用 Apache HttpClient 来实现。但是 Feign 的目的是尽量的减少资源和代码来实现和 HTTP API 的连接。 *通过自定义的编码解码器以及错误处理&#xff0c;你可以编写任何基于文本的 HTT…...

编程日记 2023/8/8 12:12:17

leetcode--每日一题--822--344(使用异或来进行数据交换)

822.翻转卡片游戏 在桌子上有 n 张卡片&#xff0c;每张卡片的正面和背面都写着一个正数&#xff08;正面与背面上的数有可能不一样&#xff09;。 我们可以先翻转任意张卡片&#xff0c;然后选择其中一张卡片。 如果选中的那张卡片背面的数字 x 与任意一张卡片的正面的数字都…...

编程日记 2023/8/8 12:11:15

OpenStreetMap数据转3D场景【Python + PostgreSQL】

很长一段时间以来&#xff0c;我对 GIS 和渲染感兴趣&#xff0c;在分别尝试这两者之后&#xff0c;我决定最终尝试以 3D 方式渲染 OpenStreetMap 中的地理数据&#xff0c;重点关注不超过城市的小规模。 在本文中&#xff0c;我将介绍从建筑形状生成三角形网格、以适合 Blend…...

编程日记 2023/8/8 12:10:14

动力节点|MyBatis入门实战到深入源码

MyBatis是一种简单易用、灵活性高且高性能的持久化框架&#xff0c;也是Java开发中不可或缺的一部分。 动力节点老杜的MyBatis教程&#xff0c;上线后广受好评 从零基础小白学习的角度出发&#xff0c;层层递进 从简单到深入&#xff0c;从实战到源码 一步一案例&#xff0c;一…...

编程日记 2023/8/8 12:09:13

分布式规则引擎框架的设计

MirAIe 规则引擎是一个可扩展且可扩展的规则引擎框架&#xff0c;允许用户对多个活动进行分组和自动化。 过去几年&#xff0c;在开发MirAIe 物联网平台时&#xff0c;我们意识到需要一个可扩展、可扩展的规则引擎框架。规则引擎使您能够对各种操作进行分组、管理和自动化&…...

编程日记 2023/8/8 12:08:12

C#开发FFMPEG例子(API方式) FFmpeg推送udp组播流

代码及工程见https://download.csdn.net/download/daqinzl/88156926 开发工具&#xff1a;visual studio 2019 播放&#xff0c;可采用ffmpeg工具集里的ffplay.exe, 执行命令 ffplay udp://238.1.1.10:6016 也可以参考(C#开发FFMPEG例子(API方式) FFmpeg拉取udp组播流并播放)…...

编程日记 2023/8/8 12:07:09

nvm下载node导致npm报错无法使用

有个依赖库需要更新下node&#xff0c;用nvm下载后项目跑不起来了&#xff0c;npm -v 还报错 其实一开始是npm下载不来&#xff0c;然后换了淘宝镜像后还是报错 然后就只能手动下载下了 进入node.js官网 https://nodejs.org/en/download 下载后注意要安装在你nvm目录中&#x…...

编程日记 2023/8/8 12:06:08

LeetCode 热题 100JavaScript--2. 两数相加

给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数都不会以 0 …...

编程日记 2023/8/8 12:05:07

zookeeper总结

1.概念 Zookeeper 是一个分布式协调服务&#xff0c;可用于服务发现&#xff0c;分布式锁&#xff0c;分布式领导选举&#xff0c;配置管理等。Zookeeper 提供了一个类似于 Linux 文件系统的树形结构&#xff08;可认为是轻量级的内存文件系统&#xff0c;但只适合存少量信息&…...

编程日记 2023/8/8 12:04:06

【程序环境与预处理玩转指南】

本章重点&#xff1a; 程序的翻译环境 程序的执行环境 详解&#xff1a;C语言程序的编译链接 预定义符号介绍 预处理指令 #define 宏和函数的对比 预处理操作符#和##的介绍 命令定义 预处理指令 #include 预处理指令 #undef 条件编译 1. 程序的翻译环境和执行环境 在…...

编程日记 2023/8/8 12:03:03

搭建简易syslog日志中转服务器

在某种场景下&#xff0c;无法接入日志审计设备&#xff0c;本文提供一种方式&#xff0c;可通过搭建简易日志中转服务器&#xff0c;收集到该环境下的日志后&#xff0c;再将其导入日志审计设备中。 0x1 开启服务 rsyslog守护进程来自于当前的linux发布版本的预装模块&#x…...

编程日记 2023/8/8 12:02:02

MongoDB文档-进阶使用-spring-boot整合使用MongoDB---MongoRepository完成增删改查

阿丹&#xff1a; 之前学习了在MongoDB客户端上的MongoDB语句现在将MongoDB整合到spring项目。 传送门&#xff1a; MongoDB文档--基本概念_一单成的博客-CSDN博客 MongoDB文档--基本安装-linux安装&#xff08;mongodb环境搭建&#xff09;-docker安装&#xff08;挂载数据卷…...

编程日记 2023/8/8 12:01:01

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/12/24 13:25:40

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/12/25 2:11:21

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/12/23 11:12:42

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/12/17 16:30:13

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/12/23 10:38:48

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/12/15 1:06:25

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2025/12/24 3:19:38

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

编程新知 2025/12/24 23:54:24