jQuery轮播效果（Carousell）

最新推荐文章于 2025-06-13 15:10:57 发布

原创最新推荐文章于 2025-06-13 15:10:57 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文详细介绍了如何使用jQuery创建轮播效果，包括数据属性控制、自动滚动、选项设置、经典和复杂布局示例，以及键盘和鼠标交互。适合初学者和进阶开发者了解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery轮播效果（Carousell）

轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JavaScript构建---内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图分浏览控制和指令支持。

在支持Page Visibility API（页面可见性）的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态。窗口最小化时），轮播效果控件会停止运动，从而节省性能。

用法

通过数据属性

使用数据属性可以轻松控制转盘的位置。Data-slide接受关键字，prev或者next改变相当于其当前位置的滑动位置。或者，使用data-slide-to将原始幻灯片索引传递到data-slide-to=”2”,将幻灯片位置转换到以0开始的特定索引。

data-ride=”carousel”属性用于将轮播标记为从页面加载开始的动画，不能与同一转盘的显式JavaScript初始化结合使用。

通过JavaScript控制轮播实现自动滚动

$(“.carousel”).carousel();

选项

通过data- 方法，定义轮播组件的属性，方法是data-interval=””,实现JavaScript属性的注入，定制此组件的各种形态。

名称	Type类型	默认值	描述
interval	number	5000	自动循环项目之间的延迟时间（即滚动时间），如果为false，则整个轮播组件不会自动滚动（仅支持手动滚动）-在调试CSS样式时这很实用。
keyboard	boolean	true	是否应对键盘事件作出反应，如果选择true则可以通过键盘上的左<-右->方向键进行切换控制。
pause	string \| boolean	"hover"	如果设置为"hover", 则鼠标移在动画屏幕上暂停旋转，并在移开鼠标后恢复旋转事件（这是默认属性）；如设置为false,则鼠标移上去轮播动画不会暂停。在触摸屏幕上，当设置为"hover"属性时，循环将在触控时暂停（一旦用户完成与旋转事件的交互）两个时间间隔自动恢复。请注意，这是上述鼠标行为的补充。
ride	string	false	在用户手动循环第一个项目后自动播放传送带，如果“carousel”则加载时自动播放传送带。
wrap	boolean	true	转盘是否应该连续循环或难以停止。

常见的幻灯片效果

注意：需要将.active样式添加到其中一个幻灯片（一般第一张），否则轮播效果将无法正常运行。

经典的幻灯片效果

轮播上的图像引用了.d-block、.w-100两个样式，以修正浏览器预设的图像对齐带来的影响。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">

<div class="carousel-inner">

<div class="carousel-item active">

<img src="..." class="d-block w-100" alt="...">

</div>

<div class="carousel-item">

<img src="..." class="d-block w-100" alt="...">

</div>

<div class="carousel-item">

<img src="..." class="d-block w-100" alt="...">

</div>

</div></div>

带控制器的效果

加上上一个/下一个控制器

代码：就比上面多了

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

这几句代码

包含姿态指示器

可将当前所在幻灯片状态指示器添加到轮播效果控件中：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">

<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>

<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>

<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

</ol>

<div class="carousel-inner">

<div class="carousel-item active">

<img src="http://code.z01.com/img/2016instbg_01.jpg" class="d-block w-100" alt="...">

</div>

<div class="carousel-item">

<img src="http://code.z01.com/img/2016instbg_02.jpg" class="d-block w-100" alt="...">

</div>

<div class="carousel-item">

<img src="http://code.z01.com/img/2016instbg_03.jpg" class="d-block w-100" alt="...">

</div>

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a></div>

包含字幕的轮播

在.carousel-item中使用.carousel-caption添加字幕到轮播控件中。

交替变化

加上.carousel-fade到滑动里，使交替变化代替滑动变化。

单个.caroussel-item间隔

加上data-interval=” ”到一个.carsouel-item更改自动循环到下一项之间的延迟时间。

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">

<div class="carousel-inner">

<div class="carousel-item active" data-interval="10000">

<img src="http://code.z01.com/img/2016instbg_01.jpg" class="d-block w-100" alt="...">

</div>

<div class="carousel-item" data-interval="2000">

<img src="http://code.z01.com/img/2016instbg_02.jpg" class="d-block w-100" alt="...">

</div>

<div class="carousel-item">

<img src="http://code.z01.com/img/2016instbg_03.jpg" class="d-block w-100" alt="...">

</div>

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a></div>