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

jQuery实现3D轮播图

news 文章来源：https://blog.csdn.net/weixin_46328739/article/details/134803683 2024/11/15 17:57:04

通过CSS3的3D变换和jQuery Transit插件实现了一个3D旋转的图片轮播效果

HTML部分：

  • div id=“banner”：定义了一个id为"banner"的div标签，作为图片轮播的容器。

  • ul: 在"banner"中定义了一个无序列表，每个列表项li包含一张图片，这些图片将在页面上以3D旋转的方式展示。

CSS部分：

  • #banner：设置了"banner"的宽度、高度、边框、背景颜色等属性，并设置了透视距离和观察者的位置，这两个属性是实现3D效果的关键。

  • ul：设置了无序列表的宽度、高度、位置等属性，特别地，设置了transform-style: preserve-3d;来保留3D转换效果，transform-origin: center center -520px;来设置旋转的原点。

  • ul>li：设置了列表项的宽度、高度、位置等属性，且每个列表项都被设定了固定的旋转角度，使得它们在3D空间中呈现出环形排列。

JavaScript部分：

  • 使用了jQuery库和jQuery Transit插件。jQuery是一个快速、简洁的JavaScript库，jQuery Transit是一个用于创建CSS3 transformations和transitions的jQuery插件。

  • setInterval(function(){…}, 2000);：每2000毫秒（即2秒）执行一次匿名函数。在这个匿名函数中，使用了jQuery Transit的transition()方法对

    • 元素进行操作，使其沿Y轴旋转60度，达到了图片轮播的效果。

  • 引入的js文件

    • jQuery.js https://jquery.com/
    • jquery.transit.js https://github.com/rstacruz/jquery.transit
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding:0;list-style: none;}#banner{width:1000px;height: 500px;border: 1px solid red;margin: 0 auto;background:#000;perspective: 1000px;   /*景深属性*/perspective-origin: top;   /*观察着观看的位置*/}ul{width:600px;height:300px;margin: 100px 200px;position: relative;transform-style: preserve-3d;transform-origin: center center -520px;}ul>li{width:600px;height:300px;position: absolute;left:0;top:0;background: #ccc;overflow: hidden;transform-origin: center center -520px;opacity: 0.8;}ul>li:first-child{transform: rotateY(60deg);}ul>li:nth-child(2){transform: rotateY(120deg);}ul>li:nth-child(3){transform: rotateY(180deg);}ul>li:nth-child(4){transform: rotateY(240deg);}ul>li:nth-child(5){transform: rotateY(300deg);}ul>li:nth-child(6){transform: rotateY(360deg);}ul>li>img{width:600px;height:auto;}</style>
</head>
<body>
<div id="banner"><ul><li><img src="img/banner1.jpg" alt=""></li><li><img src="img/banner2.jpg" alt=""></li><li><img src="img/banner3.jpg" alt=""></li><li><img src="img/banner4.jpg" alt=""></li><li><img src="img/banner5.jpg" alt=""></li><li><img src="img/banner6.jpg" alt=""></li></ul>
</div>
<script src="js/jQuery.js"></script>
<script src="js/jquery.transit.js"></script>
<script>setInterval(function(){$("ul").transition({rotateY:"-=60deg"},"linear");},2000);
</script>
</body>
</html>

相关文章：

jQuery实现3D轮播图

通过CSS3的3D变换和jQuery Transit插件实现了一个3D旋转的图片轮播效果 HTML部分&#xff1a; div id“banner”&#xff1a;定义了一个id为"banner"的div标签&#xff0c;作为图片轮播的容器。 ul: 在"banner"中定义了一个无序列表&#xff0c;每个列表项…...

编程日记 2023/12/6 21:57:57

Java面试题（每天10题）-------连载（43）

目录 Spring篇 1、请举例说明Qualifier注解 2、构造方法注入和设值注入有什么区别&#xff1f; 3、Spring框架中有哪些不同类型的事件&#xff1f; 4、FileSystemResource和ClassPathResource有什么区别&#xff1f; 5、Spring框架中都用到了哪些设计模式&#xff1f; 6…...

编程日记 2023/12/6 21:55:55

Python高级数据结构——并查集（Disjoint Set）

Python中的并查集&#xff08;Disjoint Set&#xff09;&#xff1a;高级数据结构解析 并查集是一种用于处理集合的数据结构&#xff0c;它主要支持两种操作&#xff1a;合并两个集合和查找一个元素所属的集合。在本文中&#xff0c;我们将深入讲解Python中的并查集&#xff0…...

编程日记 2023/12/6 21:53:53

pytorch学习9-优化器学习

系列文章目录 pytorch学习1-数据加载以及Tensorboard可视化工具pytorch学习2-Transforms主要方法使用pytorch学习3-torchvisin和Dataloader的使用pytorch学习4-简易卷积实现pytorch学习5-最大池化层的使用pytorch学习6-非线性变换&#xff08;ReLU和sigmoid&#xff09;pytorc…...

编程日记 2023/12/6 21:49:50

MySQL之锁

MySQL之锁 锁是计算机在执行多线程或线程时用于并发访问同一共享资源时的同步机制&#xff0c;MySQL中的锁是在服务器层或者存储引擎层实现的&#xff0c;保证了数据访问的一致性与有效性 MySQL锁可以按模式分类为&#xff1a;乐观锁与悲观锁。 按粒度分可以分为全局锁、表级锁…...

编程日记 2023/12/6 21:48:48

今日现货黄金最新建议

近期现货黄金价格再度逼近历史高位&#xff0c;很多本来在场外观望的投资者&#xff0c;都纷纷希望进场一试身手。然而大涨大跌的行情并不是很适合新手投资者参与&#xff0c;如果大家还没做好技术上的准备&#xff0c;可以多听听正规交易平台的专业人士的意见。 在正式入市之前…...

编程日记 2023/12/6 21:47:48

基于混沌算法的图像加密解密系统

1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 研究背景与意义&#xff1a; 随着信息技术的迅猛发展&#xff0c;图像的传输和存储已经成为现代社会中不可或缺的一部分。然而&#xff0c;随着互联网的普及和信息的快速传播&am…...

编程日记 2023/12/6 21:45:46

vscode插件离线下载

离线下载插件地址&#xff1a;https://marketplace.visualstudio.com/VSCode...

编程日记 2023/12/6 21:44:45

第二十一章总结

一、网络通信&#xff1a; 1.网络程序设计基础&#xff1a;网络程序设计编写的是与其他计算机进行通信的程序。 1.1局域网与互联网&#xff1a;为了实现两台计算机的通信&#xff0c;必须用一个网络线路连接两台计算机 2.网络协议&#xff1a;网络协议规定了计算机之间连接的…...

编程日记 2023/12/6 21:43:44

查看端口占用并杀死进程

1.安装查看工具 sudo yum install net-tools 2.查看占用情况 netstat -tunlp | grep 8089 3.杀死进程 kill -9 227...

编程日记 2023/12/6 21:41:43

前后端数据传输格式(上)

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 作为后端&#xff0c;写…...

编程日记 2023/12/6 21:40:42

maven的package和install命令有什么区别以及Maven常用命令与GAV坐标与Maven依赖范围与Maven依赖传递与依赖排除与统一声明版本号

maven的package和install命令有什么区别以及Maven常用命令与GAV坐标与Maven依赖范围与Maven依赖传递与依赖排除与统一声明版本号 一: maven的package和install命令有什么区别 一般都与clean命令结合使用 mvn package 生成target目录&#xff0c;编译、测试代码&#xff0c;…...

编程日记 2023/12/6 21:39:41

【动手学深度学习】(六)权重衰退

文章目录 一、理论知识二、代码实现2.1从零开始实现2.2简洁实现 【相关总结】 主要解决过拟合 一、理论知识 1、使用均方范数作为硬性限制&#xff08;不常用&#xff09; 通过限制参数值的选择范围来控制模型容量 通常不限制偏移b 小的意味着更强的正则项 使用均方范数作为柔…...

编程日记 2023/12/6 21:37:39

动手学习深度学习-跟李沐学AI-自学笔记(3)

一、深度学习硬件-CPU和GPU 芯片&#xff1a;Intel or AMD 内存&#xff1a;DDR4 显卡&#xff1a;nVidia 芯片可以和GPU与内存通信 GPU不能和内存通信 1. CPU 能算出每一秒能运算的浮点运算数&#xff08;大概0.15左右&#xff09; 1.1 提升CPU利用率 1.1.1 提升缓存…...

编程日记 2023/12/6 21:36:38

3.2 Puppet 和 Chef 的比较与应用

Puppet 和 Chef 的比较与应用 文章目录 Puppet 和 Chef 的比较与应用Puppet 和 Chef 简介工作原理对比**模块化的重要性**&#xff1a; Puppet 和 Chef 简介 介绍 Puppet 和 Chef 这两个流行的配置管理工具的背景和用途。强调它们的共同目标&#xff1a;实现自动化的系统配置和…...

编程日记 2023/12/6 21:34:36

promise使用示例

下面是一个 Promise 使用示例&#xff0c;通过 Promise 实现异步操作的链式调用&#xff1a; const getUser (userId) > {return new Promise((resolve, reject) > {// 模拟异步请求setTimeout(() > {const users [{ id: 1, name: Alice },{ id: 2, name: Bob },{ …...

编程日记 2023/12/6 21:32:33

一起学docker系列之十四Dockerfile微服务实践

目录 1 前言2 创建微服务模块2.1 **创建项目模块**2.2 **编写业务代码** 3 编写 Dockerfile4 构建 Docker 镜像5 运行 Docker 容器6 测试微服务7 总结8 参考地址 1 前言 微服务架构已经成为现代软件开发中的一种重要方式。而 Docker 提供了一种轻量级、便携式的容器化解决方案…...

编程日记 2023/12/6 21:31:32

Qt Creator 11.0.3同时使用Qt6.5和Qt5.14.2

Qt Creator 11.0.3同时使用Qt6.5和Qt5.14.2 概要方法1.打开Qt Creator中的Kit&#xff0c;这里我直接附上几张截图&#xff0c;不同的版本打开位置可能有所不同&#xff0c;总之最终目的是要打开构建套件&#xff08;Kit&#xff09;2.可以看到构建套件里面有包含了“构建套件K…...

编程日记 2023/12/6 21:29:30

Python中字符串列表的相互转换详解

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在Python编程中&#xff0c;经常会遇到需要将字符串列表相互转换的情况。这涉及到将逗号分隔的字符串转换为列表&#xff0c;或者将列表中的元素连接成一个字符串。本文将深入讨论这些情景&#xff0c;并提供丰富…...

编程日记 2023/12/6 21:28:30

09、pytest多种调用方式

官方用例 # content of myivoke.py import sys import pytestclass MyPlugin:def pytest_sessionfinish(self):print("*** test run reporting finishing")if __name__ "__main__":sys.exit(pytest.main(["-qq"],plugins[MyPlugin()]))# conte…...

编程日记 2023/12/6 21:23:25

分布式锁常见实现方案

分布式锁常见实现方案 基于 Redis 实现分布式锁 如何基于 Redis 实现一个最简易的分布式锁&#xff1f; 不论是本地锁还是分布式锁&#xff0c;核心都在于“互斥”。 在 Redis 中&#xff0c; SETNX 命令是可以帮助我们实现互斥。SETNX 即 SET if Not eXists (对应 Java 中…...

编程日记 2023/12/6 21:22:24

26、pytest使用allure解读

官方实例 # content of pytest_quick_start_test.py import allurepytestmark [allure.epic("My first epic"), allure.feature("Quick start feature")]allure.id(1) allure.story("Simple story") allure.title("test_allure_simple_te…...

编程日记 2023/12/6 21:19:22

Uncle Maker: (Time)Stamping Out The Competition in Ethereum

目录 笔记后续的研究方向摘要引言贡献攻击的简要概述 Uncle Maker: (Time)Stamping Out The Competition in Ethereum CCS 2023 笔记 本文对以太坊 1 的共识机制进行了攻击&#xff0c;该机制允许矿工获得比诚实同行更高的挖矿奖励。这种名为“Uncle Maker”的攻击操纵区块时间…...

编程日记 2023/12/6 21:12:16

浅谈可重入与线程安全

文章目录 可重入与线程安全的关系 可重入 若一个程序或子程序可以“在任意时刻被中断然后操作系统调度执行另一段代码&#xff0c;这段代码又使用了该副程序不会出错”&#xff0c;则称其为可重入&#xff08;reentrant 或 re-entrant&#xff09;的。即当该副程序正在运作时&…...

编程日记 2023/12/6 21:11:15

深入理解TDD（测试驱动开发）：提升代码质量的利器

在日常的软件开发工作中&#xff0c;我们常常会遇到这样的问题&#xff1a;如何在繁忙的项目进度中&#xff0c;保证我们的代码质量&#xff1f;如何在不断的迭代更新中&#xff0c;避免引入新的错误&#xff1f;对此&#xff0c;有一种有效的开发方式能帮助我们解决这些问题&a…...

编程日记 2023/12/6 21:10:14

pyqt5使用pyqtgraph实现动态热力图

pyqt5使用pyqtgraph实现动态热力图 一、效果图 二、流程 1、打开Designer创建一个UI界面 2、把UI转成py 3、创建一个main.py文件 4、在main文件中渲染画布、创建初始数据、画热力图、创建更新数据线程、绑定按钮触发事件三、UI界面 其中h_map.py代码如下: # -*- coding: ut…...

编程日记 2023/12/6 21:08:12

【android开发-16】android中文件和sharedpreferences数据存储详解

1&#xff0c;文件读写方式的数据存储 下面是一个简单的示例&#xff0c;演示如何在Android中使用内部存储来保存和读取文件&#xff1a; 保存文件&#xff1a; try { String data "这是要保存的数据"; FileOutputStream fos openFileOutput("myFile"…...

编程日记 2023/12/6 21:07:11

《当代家庭教育》期刊论文投稿发表简介

《当代家庭教育》杂志是家庭的参谋和助手&#xff0c;社会的桥梁和纽带&#xff0c;人生的伴侣和知音&#xff0c;事业的良师益友。 国家新闻出版总署批准的正规省级教育类G4期刊&#xff0c;知网、维普期刊网收录。安排基础教育相关稿件&#xff0c;适用于评职称时的论文发表…...

编程日记 2023/12/6 21:06:10

【操作教程】如何将外省医保转入广州市区（医保转移接续手续办理）？

登录&#xff08;可以用微信扫码采用粤省事账号登录&#xff0c;没有粤省事小程序账号的可以自主申请很方便&#xff09;广东政务服务网https://www.gdzwfw.gov.cn/ 这里不得不吐槽官网开发者&#xff0c;太拉胯了&#xff0c;居然有undefined&#xff0c;多刷新几次就好了&…...

编程日记 2023/12/6 21:00:06

【分布式系统学习】CAP原理详解

CAP原理详解 前言CAP一张图 一、概念1.1 关键词解读1.2 关于CAP&#xff08;拆分解读&#xff09;1.3 CAP原理精髓 二、CAP模拟场景举例理解三、CAP原理证明为什么不能同时满足&#xff08;下面举例说明&#xff09;3.1 必须满足分区容错性P下的处理方式3.2 不是必须满足分区容…...

编程日记 2023/12/6 20:59:05

六安最新疫情名单/自己怎么优化我网站关键词

转载于:https://www.cnblogs.com/classmethond/p/10387954.html...

编程日记 2024/11/15 15:54:33

顺企网是什么网站/代发软文

本文目录1.数据库备份2.数据库恢复3.数据库权限管理4.视图测试5.数据库功能测试6.数据操作和更新7.数据的完整性8.数据的有效性9.数据库安全测试10.并发处理测试11.数据库性能测试12.空数据库测试13.SQL语句优化14.存储过程的接口测试15.触发器的接口测试16.结合业务逻辑做关联…...

编程日记 2024/11/15 13:00:19

律师事务所网站设计/营销型网站建设价格

Python 近两年一直霸占编程语言排行榜 Top3&#xff0c;火热程度有目共睹。这也让刚入行的程序员&#xff0c;甚至 BATJ 的技术大牛&#xff0c;都意识到 Python 对于一个程序员职业发展的重要性&#xff0c;将其作为第一/第二开发语言去学习。虽然 Python 以简单易学著称&…...

编程日记 2024/11/15 7:53:03

wordpress前台漏洞/郑州网络营销哪家正规

一、Wordcount练习 1.需求:通过hadoop分析文件中单词总数 1.要被分析的文件内容如图所示,每个单词之间以空格分开 2.实现的效果如图 2.代码实现 1.解决数据倾斜问题 考虑到在机器运行过程中 Reduce阶段每个相同的Key会由一个ReduceTask来处理,而java共有十六万个,其他的单词只有…...

编程日记 2024/11/15 5:44:15

信用卡网站建设/网络热词

文章目录 前言I 添加新的实例变量1.1 原理1.2 关联对象的行为1.3 例子II 动态创建属性2.1 应用场景2.2 例子：为VC新增一个属性2.3 效果III 删除属性See Also前言 添加新的实例变量的原理：利用category结合runtime的对象关联（associated objects）实现 应用： 添加私有属性用…...

编程日记 2024/11/15 3:17:44

建设网站目的及功能定位是什么/seo外包上海

iTOP-4418开发板 支持动态调频&#xff0c;AXP228电源管理&#xff0c;低功耗运行 系统支持&#xff1a;Android4.4/5.1.1、Linux3.4.39、QT2.2/4.7/5.7、Ubuntu12.04 内存&#xff1a;1GB DDR3&#xff08;2GB&#xff09;存储&#xff1a;16GB存储EMMC&#xff1b;4MB的E…...

编程日记 2024/11/15 3:08:29