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>
- 带控制器的效果
加上上一个/下一个控制器
77
代码:就比上面多了
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
这几句代码
- 包含姿态指示器
可将当前所在幻灯片状态指示器添加到轮播效果控件中:
78
<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>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a></div>
- 包含字幕的轮播
在.carousel-item中使用.carousel-caption添加字幕到轮播控件中。
- 交替变化
加上.carousel-fade到滑动里,使交替变化代替滑动变化。
79
- 单个.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>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a></div>