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

前端js--旋转幻灯片

news 文章来源：https://blog.csdn.net/weixin_45277161/article/details/132131053 2025/4/21 0:09:46

效果图

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

代码

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

什么是线程局部变量?

在Java中&#xff0c;线程局部变量(Thread Local Variable)是一种特殊类型的变量&#xff0c;每个线程都有其自己独立的副本。这意味着每个线程可以在该变量上进行操作&#xff0c;而不会影响其他线程的副本。线程局部变量通常用于在多线程环境中存储线程私有的数据&#xff0c…...

编程日记 2023/8/8 11:59:58

Jmeter响应中的乱码问题

文章目录 问题描述解决办法 问题描述 Jmeter在访问接口的时候&#xff0c;响应内容如果有中文可能会显示乱码 响应页面没有做编码处理&#xff0c;JMeter默认按照ISO-8859-1编码格式进行解析 解决办法 在线程组中添加BeanShell PostProcessor后置处理器 prev.setDataEnco…...

编程日记 2023/8/8 11:58:57

MongoDB文档-进阶使用-MongoDB索引-createindex()与dropindex()-在MongoDB中使用正则表达式来查找

阿丹&#xff1a; 之前研究了MongoDB的基础增删改查。在学会基础的数据库增删改查肯定是不够的。这个时候就涉及到了数据库搜索的时候的效率。需要提高数据的搜索效率。 MongoDB索引 在所以数据库中如果没有数据索引的时候。如果需要查找到一些数据。都会去主动扫描所有可能存…...

编程日记 2023/8/8 11:57:55

CentOS下ZLMediaKit的可视化管理网站MediaServerUI使用

一、简介 按照 ZLMediaKit快速开始 编译运行ZLMediaKit成功后&#xff0c;我们可以运行其合作开源项目MediaServerUI&#xff0c;来对ZLMediaKit进行可视化管理。通过MediaServerUI&#xff0c;我们可以实现在浏览器查看ZLMediaKit的延迟率、负载率、正在进行的推拉流、服务器…...

编程日记 2023/8/8 11:56:53

回归预测 | MATLAB实现POA-CNN-BiGRU鹈鹕算法优化卷积双向门控循环单元多输入单输出回归预测

回归预测 | MATLAB实现POA-CNN-BiGRU鹈鹕算法优化卷积双向门控循环单元多输入单输出回归预测 目录 回归预测 | MATLAB实现POA-CNN-BiGRU鹈鹕算法优化卷积双向门控循环单元多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现POA-CNN-BiGRU鹈鹕…...

编程日记 2023/8/8 11:55:52

Rust 原生支持龙架构指令集

导读近日&#xff0c;Rust 开源社区发布 1.71.0 版本&#xff0c;实现对龙架构&#xff08;LoongArch&#xff09;指令集的原生支持。 龙架构操作系统发行版和开发者可基于上游社区源代码构建或直接下载 Rust 开源社区发布的龙架构二进制版本。Rust 开发者将在龙架构平台上获得…...

编程日记 2023/8/8 11:54:51

为生成式AI提速，亚马逊云科技Amazon EC2 P5满足GPU需求

生成式AI&#xff08;Generative AI&#xff09;已经成为全球范围内的一个重要趋势&#xff0c;得到越来越多企业和研究机构的关注和应用。纽约时间7月26日&#xff0c;亚马逊云科技数据库、数据分析和机器学习全球副总裁Swami Sivasubramanian在亚马逊云科技举办的纽约峰会上更…...

编程日记 2023/8/8 11:53:45

聊聊企业数据安全那些事~

保护企业数据安全的重要性与方法 随着信息技术的快速发展&#xff0c;企业数据的安全性变得越来越重要。在数字化时代&#xff0c;企业的核心业务和关键信息都存储在电脑系统中&#xff0c;一旦遭受到数据泄露、黑客攻击或恶意软件感染&#xff0c;将可能对企业造成严重的损害…...

编程日记 2023/8/8 11:52:44

日常随笔——如何把excel题库转换为word打印格式

将Excel题库转换为Word可以通过编程的方式实现。以下是一个使用Python的示例代码&#xff0c;该代码使用openpyxl库读取Excel文件&#xff0c;并使用python-docx库创建和保存Word文档。 首先&#xff0c;请确保已经安装了 openpyxl 和 python-docx 库。可以使用以下命令进行安…...

编程日记 2023/8/8 11:51:42

SpringCloud项目打包注意事项以及可能出错的几种情况

SpringCloud项目打包注意事项和可能出错的几种情况 1、检查子模块中的 parent的pom文件路径 \<relativePath/\>2、检查打包插件的位置3、检查module是否重复引用 欢迎访问我的个人博客&#xff1a;https://wk-blog.vip 1、检查子模块中的 parent的pom文件路径 <relat…...

编程日记 2023/8/8 11:50:41