1.Bootstrap轮播(Carousel)插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。要使用Bootstrap,需要先引入Bootstrap的相关文件。
图1.1 引入Bootstrap的相关文件
2.轮播图三要素:小圆圈、图片、左右按钮
图1.2 轮播图代码
3.轮播图组件注解
(1)data-ride=”carousel”:触发轮播动作,实现自动播放,用于标记轮播在页面加载时就开始动画播放
(2)data-intarval=”1000”:表示播放的时间间隔,单位毫秒,默认值5000
(3)data-wrap=”true”:表示循环播放,如果是false会停止到最后一张
(4)data-pause=”hover”:表示暂停(默认),鼠标移上去暂停到当前幻灯片,还有false属性
(5)class="carousel-indicators":圆点样式,直接使用,Bootstrap组件
(6)data-target:指向事件的目标,即要触发的元素
(7)data-slide-to:向轮播传递一个滑动索引,把滑块移动到一个特定的索引,从0开始计数
(8)data-slide:接受关键字prev或next,用来改变幻灯片的位置
(9)class="left carousel-control" 表示用左边修饰的class
(10)class="glyphicon glyphicon-chevron-left" 表示左箭头
(11)role="button"将a元素转换为button按钮功能进行使用
(12)aria-hidden="true" 图标的可访问性,避免混淆的输出内容,图标没必要被类似屏幕阅读器的设备访问,hidden就是对其隐藏
(13)class="sr-only"主要用于增强可访问性,能保证屏幕阅读器正确读取且不会影响 UI的视觉呈现
(14)图片上的div加上相应的class名字,直接调用bootstrap组件,有相应的js代码和css代码,可以直接触发执行。