在前端开发中，实现吸引人的页面特效是很重要的一部分。其中，图片折叠轮换特效可以为页面带来独特的视觉体验。本文将介绍如何使用 jQuery 插件 Orbit.js 来实现这种效果，并附上示例代码。
引入 Orbit.js
首先，我们需要引入 Orbit.js。可以通过以下方式来获取：
<!-- 引入 jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入 Orbit.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/js/plugins/foundation.orbit.min.js"></script>
请注意，Orbit.js 是 Foundation 框架的一部分，因此需要同时引入 jQuery 和 Foundation。
HTML 结构
接下来，我们需要创建一个 HTML 结构来容纳图片。以下是一个示例结构：
-- -------------------- ---- -------
---- ------------- ------------- -------------------- ----- --------- -----------
--- ------------------------
------- ---------------------------- ---------------------------- ------------------------------------
------- ------------------------ ------------------------ ------------------------------------
--- ---------------- -------------
---- ------------------------------------------- ------------
-----
--- --------------------
---- ------------------------------------------- ------------
-----
--- --------------------
---- ------------------------------------------- ------------
-----
--- --------------------
---- ------------------------------------------- ------------
-----
-----
---- ----------------------
------- ----------------- -------------------- ------------------------- ----- -------------------- ------------------------------------
------- -------------------- -------------------------- ----- -------------------- ------------------------------------
------- -------------------- ------------------------- ----- -------------------- ------------------------------------
------- -------------------- -------------------------- ----- -------------------- ------------------------------------
------
------在这个示例中，我们创建了一个 div 元素，其中包含了一个 ul 元素用于放置图片，以及一个 nav 元素用于显示轮换的小圆点。注意，第一个 li 元素应该加上 is-active 类以确保它是默认显示的。
CSS 样式
为了使效果更美观，我们还需要添加一些 CSS 样式来修饰图片。以下是一个示例：
-- -------------------- ---- ------- ------------ - --------- --------- --------- ------- - ------------ --- - ------ ----- ------- ----- ----------- --------- ---- --------- - ---------------------- --- - ---------- --------- - ---------------------------- --- - --------- --------- ---- -- ----- -- ----------------- ------ ------ ---------- ---------- --------------- ----------------- -
这个样式将在图片当前被选中时缩放为原始大小，并且在其他图片上应用一些旋转和缩放的效果。
JavaScript 代码
最后，我们需要编写 JavaScript 代码来初始化并启动轮换特效。以下是示例代码：
$(document).ready(function() {
$('.orbit').foundation({
orbit: {
animation: 'fade',
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/2754) ，转载请注明来源
[https://www.javascriptcn.com/post/2754](https://www.javascriptcn.com/post/2754)