基本的轮播图实现
<!--
以下容器就是整个轮播图组件的整体,
注意该盒子必须加上class="carousel slide" data-ride="carousel"表示当前是一个轮播图
bootstrap.js会自动为当前元素添加图片轮播特效
-->
<div id="轮播图的id" class="carousel slide" data-ride="carousel">
<!--ol标签是图片轮播的控制点-->
<ol class="carousel-indicators">
<!--
每个li就是一个单独控制点
data-target属性就是指定当前控制点控制的是哪个轮播图,其目的是如果界面上有多个轮播图
data-slide-to属性是指当前li元素绑定的是第几个轮播项
注意:默认必须给其中某个li加上active,展示的时候就是焦点项目
-->
<li data-target="#轮播图的id" data-slide-to="0" class="active"></li>
<li data-target="#轮播图的id" data-slide-to="1"></li>
<!--…更多的-->
</ol>
<!--
.carousel-inner是所有轮播项的容器盒子,
注意,role="listbox"代表当前div是一个列表盒子,作用就是给当前div添加一个语义
-->
<div class="carousel-inner" role="listbox">
<!--每个.item就是单个轮播项目,注意默认要给第一个轮播项目加上active,表示为焦点-->
<div class="item active">
<!--轮播项目中展示的图片-->
<img src="example.jpg" alt="示例图片">
<div class="carousel-caption">
<!--标题或说明性文字,如果不需要,直接删除当前div.carousel-caption-->
</div>
</div>
<div class="item">
<!--...-->
</div>
<!--...-->
</div>
<!--图片轮播上左右两个控制按钮,分别点击可以滚动到上一张和下一张-->
<!--此处需要注意,该a链接的href属性必须指向需要控制的轮播图ID-->
<!--另外a链接中的data-slide="prev"代表点击该链接会滚到上一张,如果设置为next的话则相反-->
<a class="left carousel-control" href="#轮播图的id" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一张</span>
</a>
<a class="right carousel-control" href="#轮播图的id" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一张</span>
</a>
</div>
由于轮播图片超宽造成的影响
*美工为了在不同屏幕下更好地展示将图片两边做的非常宽,但我们大多数情况的页面宽度都无法满足这样的图片宽
*而且Bootstrap的样式中默认将图片的max-width设置为100%;
*造成界面图片缩放
*想在一个较小屏幕下展示一个超宽的图片,并让图片居中显示,有两种办法:
(1)换用背景图的方式,background-position: center center;
(2)使img元素绝对定位,left: 50%, margin-left: -width/2
background使用
将容器的高度固定(410px)
将轮播图改为背景显示
由于可能图片的高度不一定是410px
所以需要设置css3中的background-size
background-size
length
如background-size: 100px 100px, 将背景图固定到多大尺寸
percentage
如background-size: 90% 90%, 以百分比的形式设置背景大小
cover
1.背景图片等比例缩放
2.让背景图相对较小边放大到目标容器大小结束
如:一张100200的背景图放到一个300400的盒子中,最终背景图片的大小是300600
因为背景图的较小边为100,将100放大到目标容器300的高度,放大了3倍,最终结果200400