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

前端js--旋转幻灯片

news 2026/4/1 21:37:43

效果图

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

代码

<!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

DeepSeek句式重构指令怎么用？手把手教你降AI率超过30%

第一次操作的话&#xff0c;照着下面的步骤来&#xff0c;15分钟内搞定DeepSeek句式重构指令、降AI、降AIGC率。 工具选嘎嘎降AI&#xff08;www.aigcleaner.com&#xff09;&#xff0c;达标率99.26%&#xff0c;有退款保障&#xff0c;操作也不复杂。 准备工作 需要准备的&…...

编程新知 2026/4/1 21:30:31

新手入门服务器：用快马生成你的第一个xshell等效连接程序

作为一个刚接触服务器运维的新手&#xff0c;第一次使用xshell这类工具时&#xff0c;面对各种专业术语和复杂操作确实容易一头雾水。最近我发现用InsCode(快马)平台生成学习项目特别适合入门&#xff0c;今天就分享一下如何通过可运行的代码实例来理解SSH连接的核心概念。 理解…...

编程新知 2026/4/1 20:25:48

Scratch飞翔小鸟游戏制作教程：从零开始打造你的第一个像素风小游戏

Scratch飞翔小鸟游戏制作教程&#xff1a;从零开始打造你的第一个像素风小游戏 当孩子们第一次接触编程时&#xff0c;往往会被复杂的代码和抽象的概念吓退。而Scratch就像一扇通往创意世界的大门&#xff0c;用积木式的编程方式让游戏开发变得触手可及。今天&#xff0c;我们将…...

编程新知 2026/4/1 19:35:12

Qwen3-14B部署后效果追踪：30天使用数据与关键指标增长分析

Qwen3-14B部署后效果追踪&#xff1a;30天使用数据与关键指标增长分析 1. 部署效果概览 在RTX 4090D 24GB显存环境下部署Qwen3-14B镜像后&#xff0c;我们对系统进行了为期30天的持续监测。数据显示&#xff0c;这套优化配置展现出令人印象深刻的稳定性和性能表现&#xff1a…...

编程新知 2026/4/1 18:46:44

SMR实战：如何将GWAS数据快速转换为BESD格式（附常见错误排查）

SMR实战&#xff1a;GWAS数据高效转换为BESD格式的完整指南与深度排错手册 在生物信息学研究中&#xff0c;基于汇总数据的孟德尔随机化&#xff08;Summary-data-based Mendelian Randomization, SMR&#xff09;已成为探索基因表达数量性状位点&#xff08;eQTL&#xff09;与…...

编程新知 2026/4/1 18:40:33

终极指南：3步用VR-Reversal将3D视频转为2D，普通设备也能自由探索VR世界

终极指南&#xff1a;3步用VR-Reversal将3D视频转为2D&#xff0c;普通设备也能自由探索VR世界 【免费下载链接】VR-reversal VR-Reversal - Player for conversion of 3D video to 2D with optional saving of head tracking data and rendering out of 2D copies. 项目地址…...

编程新知 2026/4/1 17:49:31

DDA直线插补算法在MATLAB中的优化实现与性能分析

1. DDA直线插补算法基础与MATLAB实现 DDA&#xff08;Digital Differential Analyzer&#xff09;算法是计算机图形学中最基础的直线生成算法之一&#xff0c;它的核心思想是利用直线的微分方程来递推计算像素点位置。我第一次接触这个算法是在大学计算机图形学课程上&#xff…...

编程新知 2026/4/1 17:45:26

终极指南：CleanArchitecture项目Angular 17快速升级实战与最佳实践

终极指南&#xff1a;CleanArchitecture项目Angular 17快速升级实战与最佳实践 【免费下载链接】CleanArchitecture Clean Architecture Solution Template for ASP.NET Core 项目地址: https://gitcode.com/GitHub_Trending/cle/CleanArchitecture 如果你正在使用Clean…...

编程新知 2026/4/1 17:11:50

终极RPA档案解压指南：快速提取Ren‘Py游戏资源的完整教程

终极RPA档案解压指南&#xff1a;快速提取RenPy游戏资源的完整教程 【免费下载链接】unrpa A program to extract files from the RPA archive format. 项目地址: https://gitcode.com/gh_mirrors/un/unrpa 想要从RenPy视觉小说游戏中提取图片、音频和脚本资源吗&#x…...

编程新知 2026/4/1 17:07:46

Winhance中文版：图形界面驱动的Windows系统优化解决方案

Winhance中文版&#xff1a;图形界面驱动的Windows系统优化解决方案 【免费下载链接】Winhance-zh_CN A Chinese version of Winhance. C# application designed to optimize and customize your Windows experience. 项目地址: https://gitcode.com/gh_mirrors/wi/Winhance-…...

编程新知 2026/4/1 16:49:09