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

jQuery实现3D轮播图

news 2026/2/10 1:59:35

通过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

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2026/1/21 14:29:57

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2026/1/30 13:40:43

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2026/1/15 4:25:16

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2026/1/31 7:25:57

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/25 11:52:39

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2026/1/31 11:35:24

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2026/1/31 13:13:28

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2026/1/31 13:18:31