4.22、Bootstrap V4自学之路-----内容---轮播
为什么80%的码农都做不了架构师?>>>
示例
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li></ol><div class="carousel-inner" role="listbox"><div class="carousel-item active"><img data-src="holder.js/600x300?theme=sky" alt="First slide"></div><div class="carousel-item"><img data-src="holder.js/600x300?bg=#666" alt="Second slide"></div><div class="carousel-item"><img data-src="holder.js/600x300?bg=#999" alt="Third slide"></div><div class="carousel-item"><img data-src="holder.js/600x300bg=#333" alt="4 slide"></div></div><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="icon-prev" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="icon-next" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>
伪代码一下,看看结构。
《div id="carousel-example-generic" class="carousel slide" data-ride="carousel"》
--| 《ol class="carousel-indicators"》 这里是中下处的小圆点。点击可以切换
--| --| 《li data-target="#carousel-example-generic" data-slide-to="0"》 这里是每个小点的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="1"》 这里是每个小点的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="2"》 这里是每个小点的指向。
--| --| 《li data-target="#carousel-example-generic" data-slide-to="3"》 这里是每个小点的指向。
--| 《div class="carousel-inner" role="listbox"》 这里是图片盒子,listbox
--| --|《div class="carousel-item active"》 注意这里是激活状态。
--| --| --| 《img》 这里是图片0
--| --|《div class="carousel-item"》 这里是存放图片的div
--| --| --| 《img》 这里是图片1
--| --|《div class="carousel-item"》 这里是存放图片的div
--| --| --| 《img》 这里是图片2
--| --|《div class="carousel-item"》 这里是存放图片的div
--| --| --| 《img》 这里是图片3
--| 《a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"》这里是prev按钮。
--| --| 《span class="icon-prev" aria-hidden="true"》 这里加载图片-箭头左
--| --| 《span class="sr-only"》 这里是辅助设备使用说明。我很喜欢这个。
--| 《a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"》这里是prev按钮。
--| --| 《span class="icon-next" aria-hidden="true"》 这里加载图片-箭头左
--| --| 《span class="sr-only"》 这里是辅助设备使用说明。我很喜欢这个。
PS:如果使用图片处没有写 .active类。则轮播框不会出现。
PS:出存在两个 .active类。那如下图所示,控件按钮将会发生混乱。
第一个可以控制,第二个只能自己轮播。
过渡动画在IE 9中不受支持。
需要初始化活跃的元素。需要给其中滑块中的一个添加.active
类。否则,轮播将不可见。
PS:这个功能有一个bug,就是当第一页是时,中下部的翻页圆点不高亮。对于处女座的我感觉有点挠心。
可用的选项
在任何的.carousel-item
元素上都可以轻松的通过使用.carousel-caption
来给你的幻灯片加上说明文字。在那里面加上任何可选的 HTML,都将自动对齐和格式化。
<div class="carousel-item active"><img data-src="holder.js/600x300?theme=sky" alt="First slide"><div class="carousel-caption"><h4>标题~</h4><p>内容!!!<br>1</p><p>内容!!!<br>1</p></div>
</div>
伪代码:其实看一下,就是在. carousel-item中加入了一个<div class=carousel-caption>使这个div浮在窗体上方。
<div class="carousel-item"><img src="..." alt="..."><div class="carousel-caption"><h3>...</h3><p>...</p></div>
</div>
易用性问题
轮播组件通常与易用性原则并不冲突。如果你需要被约束的轮播,把请考虑用别的选项呈现你的内容。
这里理解是,如果想要使用超出BS自带这个轮播组件的功能,加自己添添改改。
如果出了问题解决不了,就另请高明,加载别的插件吧。
用法
多个轮播
轮播要求在最外层的容器(即该.carousel
)中用一个id
,来让轮播控件正常工作。如果添加多个轮播,或者修改了一个轮播的id
,请务必要更新相关的控件。
根据多个不同的#id控制多个轮播组件同时工作。
利用data属性
使用data属性可以轻松控制轮播的滑动方向。data-slide
接受一个关键词prev
或者next
,它用于改变当前滑动的方向。另外,使用data-slide-to
可以向轮播传递一个原生的索引。data-slide-to="2"
可以让轮播把滑动位置转到特定的索引,这个索引从0开始计数。
data-ride="carousel"
属性用来标记一个轮播在网页载入时动画的起点。它不能用于结合JavaScript显式初始化同一个轮播(这样是冗余和不必要的)。
利用JavaScript
调用轮播:
$('.carousel').carousel()
选项
可以利用data属性或者JavaScript传递选项。
如果用data属性,请把选项名追加到data-
后面,比如说写成data-interval=""
。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
interval | number | 5000 | 这个时间数值用来指定两次自动滚动之间的延迟。如果设置为false,轮播就不会自动滚动。 |
pause | string | "hover" | 当鼠标进入时中断轮播的滚动,当鼠标离开时恢复轮播的滚动。 |
wrap | boolean | true | 轮播需要持续滚动,还是拥有一个硬停顿? |
keyboard | boolean | true | 轮播是否需要响应键盘事件? |
方法
.carousel(options)
用一个可选的选项object
初始化轮播,开始滚动帧。
$('.carousel').carousel({interval: 2000
})
.carousel('cycle')
从左到右开始滚动轮播。
.carousel('pause')
停止滚动轮播。
.carousel(number)
轮播滚动到一个特定的帧(基数是0,类似于一个数组。)
.carousel("prev')
滚到前一帧
.carousel("next")
滚到下一帧。
事件
Bootstrap的轮播类插件为轮播相关的回调函数提供了事件接口。这些事件都有下面的额外的属性:
direction
: 方向:轮播滑动的方向(可以是"left"
或者"right"
)。relatedTarget
: 滑动到中间位置的DOM对象,即激活项。
所有的轮播事件在轮播自身上触发(即,在<div>
上面触发)。
事件类型 | 描述 |
---|---|
slide.bs.carousel |
在调用slide 行为的时候,会立即触发该事件。
|
slid.bs.carousel | 在滑动过渡完成的时候会触发该事件。 |
$('#myCarousel').on('slide.bs.carousel', function () { // do something… })
例子
这里研究到现在发现的解决办法。先上例子
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval=""><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li></ol><div class="carousel-inner" role="listbox"><div class="carousel-item active"><img data-src="holder.js/600x300?theme=sky" alt="First slide"><div class="carousel-caption"><h4>标题~</h4><p>内容!!!<br>1</p><p>内容!!!<br>1</p></div></div><div class="carousel-item"><img data-src="holder.js/600x300?bg=#666" alt="Second slide"></div><div class="carousel-item"><img data-src="holder.js/600x300?bg=#999" alt="Third slide"></div><div class="carousel-item"><img data-src="holder.js/600x300bg=#333" alt="4 slide"></div></div><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="icon-prev" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="icon-next" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>
<button type="button" onclick="text()">ddd </button>
<script type="text/javascript">function text(){$('#carousel-example-generic').carousel({interval:500});$('#carousel-example-generic').carousel('next');$('#carousel-example-generic').carousel();}
</script>
将代码分为两段:第一段是轮播框。在轮播框的最外层加入属性data-interval=""后,使用下面的语句,生效。
$('#carousel-example-generic').carousel({interval:500});
PS:这里有一个问题,当给最外层设置data-interval=空时。轮播页面是不滚动的。
按下按钮ddd时,才给赋值。这里摘录一段话,之前一直忽略的。
可以利用data属性或者JavaScript传递选项。如果用data属性,请把选项名追加到data-
后面,比如说写成data-interval=""
。
应对这个问题,可以考虑轮播组件如果自定义的话,添加初始赋值的方式。
PS:使用.carousel("prev"),无需添加data-*。
但同样的方法对"cycle"无效,我很费解。mark!
转载于:https://my.oschina.net/asktao/blog/647540
4.22、Bootstrap V4自学之路-----内容---轮播相关推荐
- 4.19、Bootstrap V4自学之路-----内容---提示冒泡
为什么80%的码农都做不了架构师?>>> 我一直没有调试出来,包裹引入tether.min.js仍然无法出发效果. mark着,回头再看.先熟悉文档. 概述 在使用提示冒泡插件 ...
- 4.18、Bootstrap V4自学之路-----内容---滚动监听
为什么80%的码农都做不了架构师?>>> 总体来说,用起来不是特别满意,先放一放吧. 导航条示例 滚动监听插件会根据滚动的位置,自动更新导航条的目标.滚动在导航条下面的区域,查 ...
- 4.4、Bootstrap V4自学之路------组件---表单
为什么80%的码农都做不了架构师?>>> 表单控件 下面是一个Bootstrap支持的表控件以及自定义类的完整列表.额外的文档对每个组都是可用的. 类 作用 支持的变量 .fo ...
- 1.3、Bootstrap V4自学之路------起步---浏览器支持
为什么80%的码农都做不了架构师?>>> 支持的浏览器 Bootstrap 支持所有的主流浏览器和平台的最新的.稳定的版本. 在 Windows 中, **我们支持 Inter ...
- 4.7、Bootstrap V4自学之路------组件---广告屏
为什么80%的码农都做不了架构师?>>> 示例 单独的一个空的标签 <div class="jumbotron"><!-- 背景色是灰色的 ...
- bootstrap实战--微金所项目(轮播图1)
使用HTML+CSS实现响应式轮播图 一.轮播图展示 移动端(< 768px) 非移动端(>768px) 二.轮播图实现思路 移动端 1).在移动端可以直接使用bootstrap提供的相关 ...
- 基于Layui自定义内容轮播插件
基于Layui自定义内容轮播插件 演示地址 下载地址
- Web APIs:移动端网页特效--移动端常用开发框架(Bootstrap)及阿里百秀轮播图案例
框架概述 框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案.框架的控制权在框架 本身,使用者要按照框架所规定的某种规范进行开发. 前端常用的框架有 Bootstrap.V ...
- html jq循环添加内容,jquery循环内容轮播
今天我们要与大家分享一个简单的圆形内容转盘.我们的想法是有一些内容框,我们可以无限滑动(圆形).当点击"更多"链接,在各自的项目移动到左侧,会滑出一个内容区域.现在,我们可以通过导 ...
最新文章
- 多尺度目标检测--Scale-Aware Trident Networks for Object Detection
- C#的参数类型:params、out和ref
- php 不刷新提交,提交表单而不刷新页面ajax,php,javascript?
- 阅读总结:如何在生产中成功运用Docker
- Java 蓝桥杯 装箱问题
- 诗歌rails之获取本地ip地址
- 华为HMS核心服务全面开放 赋能开发者共筑智慧新生态
- BAT 争抢的全栈工程师真的存在?
- mysql命令的依赖库_3.EZMM工程(常用shell命令,及需要用到的基本依赖库)
- linux常用进程管理工具及查看
- Android wm指令的用法笔记
- 游戏动画中欧拉角与万向锁的理解
- 阿里这份Java程序性能优化指南,让你的程序快上200%
- 关于MATLAB未定义函数或变量 ‘wavread‘的很简单的解决办法
- 并发调度的可串行性:可串行化调度、冲突可串行化调度、两段锁协议
- 基于树莓派3b+学习视觉slam
- fastnest怎么一键排版_我的妈呀!一键排版也太好用了吧!3秒钟搞定排版!
- 监听网页微信扫码支付成功_PC网页微信扫码支付(模式二)
- 网络传输介质有哪几种
- 2015北京宇信易诚科技面试题