前端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;}
}

配图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/77916.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于RASC的keil电子时钟制作(瑞萨RA)(8)----按键修改数码管时间

基于RASC的keil电子时钟制作8_按键修改数码管时间 概述硬件准备视频教程配置按键管脚按键设置主程序timer_smg.ctimer_smg.h 概述 前几节课程已经单独驱动了数码管和RTC&#xff0c;同时已经整合成了能够用数码管显示具体时间&#xff0c;但是无法修改时间&#xff0c;这节就来…

【C# 基础精讲】为什么选择C# ?

C#&#xff08;C Sharp&#xff09;是由微软开发的一种通用、面向对象的编程语言。它最初于2000年发布&#xff0c;自那时以来逐渐成为开发者的首选之一。C#的设计目标是提供一种简单、现代、可靠且安全的编程语言&#xff0c;使开发者能够轻松构建各种类型的应用程序。 为什么…

Android Studio 的Gradle版本修改

使用Android Studio构建项目时&#xff0c;需要配置Gradle&#xff0c;与Gradle插件。 Gradle是一个构建工具&#xff0c;用于管理和自动化Android项目的构建过程。它使用Groovy或Kotlin作为脚本语言&#xff0c;并提供了强大的配置能力来定义项目的依赖关系、编译选项、打包方…

Python-flask项目入门

一、flask对于简单搭建一个基于python语言-的web项目非常简单 二、项目目录 示例代码 git路径 三、代码介绍 1、安装pip依赖 通过pip插入数据驱动依赖pip install flask-sqlalchemy 和 pip install pymysql 2.配置数据源 config.py DIALECT mysql DRIVER pymysql USERN…

抖音seo矩阵系统源代码开发搭建技术分享

抖音SEO矩阵系统是一个较为复杂的系统&#xff0c;其开发和搭建需要掌握一定的技术。以下是一些技术分享&#xff1a; 技术分享 抖音SEO矩阵系统的源代码可以使用JAVA、Python、PHP等多种语言进行开发。其中&#xff0c;JAVA语言的应用较为广泛&#xff0c;因为JAVA语言有良好…

Stephen Wolfram:ChatGPT 的训练

The Training of ChatGPT ChatGPT 的训练 OK, so we’ve now given an outline of how ChatGPT works once it’s set up. But how did it get set up? How were all those 175 billion weights in its neural net determined? Basically they’re the result of very large…

《UNIX 传奇:历史与回忆》读后感

《UNIX 传奇&#xff1a;历史与回忆》 是 bwk&#xff08;Brian W. Kernighan&#xff09;2019 年的新作&#xff0c;回忆了 UNIX 在大半个世纪的风雨历程&#xff0c;是一本引人入胜的书籍。通过对 UNIX 操作系统的历史和发展进行详细的叙述和回顾&#xff0c;让我对这个操作系…

SpringBoot整合redis集群实现读写分离(哨兵模式)

1 首先要在Linux虚拟机上安装redis # 安装包存放目录 cd /usr/local/redis # 下载最新稳定版 wget https://download.redis.io/releases/redis-6.2.6.tar.gz # 解压 tar -zxvf redis-6.2.6.tar.gz # 进入解压后的目录 cd /usr/local/redis/redis-6.2.6/ # 编译 make # 执行 &q…

iOS——Block循环引用

Capturing ‘self’ strongly in this block is likely to lead to a retain cycle 典型的循环引用 self持有了blockblock持有了self(self.name) 这样就形成了self -> block -> self的循环引用 解决办法 强弱共舞 使用 中介者模式 __weak typeof(self) weakSelf sel…

以产品经理的角度去讲解原型图---会议OA项目

目录 一.前言 二.原型图 2.1 原型图是什么 3.1 原型图的作用 三.演示讲解 3.1 项目背景 3.2 项目介绍 3.2.1 会议管理&#xff08;会议的发起&#xff0c;通知&#xff09; 3.2.2 投票管理&#xff08;会议的流程重大决策记录&#xff09; 3.2.3 会议室管理 3.2.4 系统管…

谷粒商城第九天-对商品服务中所涉及到的表的思考

目录 一、总述 二、spu、sku、规格参数、销售属性之间的关系理解 三、相关表设计 1. 属性表 2. 基本属性分组表 3. 分组-基本属性关系表 ​4. spu基本属性值表 5. spu详情信息表 6. spu评论表 7. 商品sku值表 8. sku详情表 9. sku图片表 10. 分类表 11. 品牌表 …

助力工业物联网,工业大数据之服务域:安装主题分析实现【二十七】

文章目录 09&#xff1a;服务域&#xff1a;安装主题分析实现10&#xff1a;服务域&#xff1a;维修主题分析实现 09&#xff1a;服务域&#xff1a;安装主题分析实现 目标&#xff1a;掌握安装主题的需求分析及实现 路径 step1&#xff1a;需求step2&#xff1a;分析step3&am…

深入解析人脸识别技术:原理、应用与未来发展

人脸识别技术&#xff1a;从原理到应用 引言人脸识别技术的重要性和应用领域 人脸识别的基本原理图像采集与预处理特征提取与表征数据匹配与比对 传统人脸识别方法主成分分析&#xff08;PCA&#xff09;线性判别分析&#xff08;LDA&#xff09;小波变换在人脸识别中的应用 深…

Grafana集成prometheus(3.Grafana添加promethus数据)

添加数据库 选择Connections -> Datasources&#xff0c;点击Add New data source&#xff0c;填写Promitheus Server Url,点击 save & test完成配置 添加DashBorad 选择prometheus数据库选择code填入对应的查询公式(监控公式参考Prometheus监控公式)修改面板名称Ti…

Centos虚拟机忘记密码-修改密码

1.重启系统 2.在这个选择界面&#xff0c;按e建 3.找到如下位置&#xff0c;插入init/bin/sh 4.填写完成后按Ctrlx引导启动 5.输入mount -o remount, rw / (注意空格) 6.重置密码 出现以下为重置成功 7.执行touch /.autorelabel 8.退出exec /sbin/init 9.输入你的新密…

flutter开发实战-video_player视频播放功能及视频缓存

flutter开发实战-video_player视频播放功能及视频缓存 最近开发过程中video_player播放视频&#xff0c; 一、引入video_player 在pubspec.yaml引入video_player video_player: ^2.7.0在iOS上&#xff0c;video_player使用的是AVPlayer进行播放。 在Android上&#xff0c;…

代码分析:循环创建N个子进程——为什么最后一个属于父进程?

黑马C/C 2018年32期代码分析 //循环创建n个子进程 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/types.h> #include <unistd.h>int main() {int i 0;for(i0; i<3; i){//创建子进程pid_t pid fork();if(pid&…

EMD经验模态分解介绍

EMD概述 其实一种信号分解方法&#xff0c;是一种自适应的数据处理方法&#xff0c;适合非线性和非平稳时间序列的分析和研究&#xff0c;其本质是对数据序列或信号的平稳化处理。 将上面6个信号叠加如下&#xff1a; 就是6个简单信号叠加&#xff0c;形成一个复杂信号。 核心…

关于 Ubuntu 长按 shift 无效, 按 Esc 直接进入 grub 改密码的解决方法

本次长按shift没有反应&#xff0c;直接进入了系统界面&#xff0c;所以改用长按Esc键&#xff0c;步骤如下&#xff1a; 1. 长按esc&#xff0c;进入grub>提示 2.输入grub>normal &#xff0c;回车 3.上一步回车后&#xff0c;继续敲击Esc &#xff0c;出现grub界面 …

2023.08.01 驱动开发day8

驱动层 #include <linux/init.h> #include <linux/module.h> #include <linux/of.h> #include <linux/of_irq.h> #include <linux/interrupt.h> #include <linux/fs.h> #include <linux/gpio.h> #include <linux/of_gpio.h>#…