发布于2021-06-20 18:19 阅读(699) 评论(0) 点赞(19) 收藏(4)
在支持Page Visibility API(页面可见性)的浏览器中,当网页对用户不可见时(如浏览器选项卡处于非活动状态。窗口最小化时),轮播效果控件会停止运动,从而节省性能。
使用数据属性可以轻松控制转盘的位置。Data-slide接受关键字,prev或者next改变相当于其当前位置的滑动位置。或者,使用data-slide-to将原始幻灯片索引传递到data-slide-to=”2”,将幻灯片位置转换到以0开始的特定索引。
data-ride=”carousel”属性用于将轮播标记为从页面加载开始的动画,不能与同一转盘的显式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
加上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>
原文链接:https://blog.csdn.net/chenmo2001/article/details/117674446
作者:92wwhehjw
链接:http://www.qianduanheidong.com/blog/article/135928/b322d59d3a511d5ddb86/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!