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

jQuery实现3D轮播图

news 2026/5/17 6:42:13

通过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部分： div id“banner”：定义了一个id为"banner"的div标签，作为图片轮播的容器。 ul: 在"banner"中定义了一个无序列表，每个列表项…...

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

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

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

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

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

Python中的并查集（Disjoint Set）：高级数据结构解析并查集是一种用于处理集合的数据结构，它主要支持两种操作：合并两个集合和查找一个元素所属的集合。在本文中，我们将深入讲解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-非线性变换（ReLU和sigmoid）pytorc…...

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

MySQL之锁

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

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

今日现货黄金最新建议

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

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

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

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

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

vscode插件离线下载

离线下载插件地址：https://marketplace.visualstudio.com/VSCode...

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

第二十一章总结

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

编程日记 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

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

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

编程日记 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目录，编译、测试代码，…...

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

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

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

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

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

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

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

3.2 Puppet 和 Chef 的比较与应用

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

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

promise使用示例

下面是一个 Promise 使用示例，通过 Promise 实现异步操作的链式调用： 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，这里我直接附上几张截图，不同的版本打开位置可能有所不同，总之最终目的是要打开构建套件（Kit）2.可以看到构建套件里面有包含了“构建套件K…...

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

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

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

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

官方用例 # 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

【2024最新】ElevenLabs日语模型v2.4深度评测：对比VoiceLab、OpenJTalk与Azure Custom Neural TTS的MOS分与实时吞吐数据

更多请点击： https://intelliparadigm.com 第一章：ElevenLabs日语模型v2.4的核心演进与技术定位 ElevenLabs 日语模型 v2.4 并非简单语音合成能力的迭代，而是面向高保真、低延迟、多语境日语语音生成的一次系统性重构。其底层架构从基于 Gri…...

编程新知 2026/5/17 4:15:52

ARM Debug Interface v5.1架构解析与调试实践

1. ARM Debug Interface v5.1架构深度解析1.1 调试接口技术演进与核心价值ARM调试接口(ADI)技术历经多次迭代，v5.1版本作为当前主流标准，在嵌入式系统调试领域确立了关键地位。调试接口本质上是处理器核与外部调试工具之间的标准化通信桥梁，其…...

编程新知 2026/5/17 4:07:15

μSR技术中的双量子Rabi振荡优化与应用

1. 实验背景与核心原理在量子物理和凝聚态物理研究中，μ子自旋共振（μSR）技术是一种独特的探测手段。这项技术利用正μ子（μ）作为微观探针，通过观测其自旋极化行为来研究材料的局部磁环境。当μ子注入样品…...

编程新知 2026/5/17 3:54:20

5分钟学会创建专业交通网络可视化地图

5分钟学会创建专业交通网络可视化地图【免费下载链接】transit-map The server and client used in transit map simulations like swisstrains.ch 项目地址: https://gitcode.com/gh_mirrors/tr/transit-map 你想在网页上展示动态的公共交通网络吗？Transit…...

编程新知 2026/5/17 3:25:35

如何用Kafka-King轻松管理Kafka集群：5分钟上手完整指南

如何用Kafka-King轻松管理Kafka集群：5分钟上手完整指南【免费下载链接】Kafka-King A modern and practical kafka GUI client 💕🎉Kafka-King 是一款现代化、实用的 Kafka GUI 客户端，旨在通过直观的桌面界面简化 Apache Kafka …...

编程新知 2026/5/17 2:43:35