轮播效果
图片太多一次性展示不完,就可以用轮播效果,而轮播效果代码块如下:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 在下方正中部分显示特殊的数字序号块 -->
<ol class="carousel-indicators">
<!-- li元素的 data-target 属性绑定的是整个轮播块的ID属性-->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- 放置显示的图片内容部分, 默认被显示的图片需要设置类属性--active -->
<div class="carousel-inner" role="listbox">
<!--active 就是显示当前这张照片-->
<div class="item active">
<img src="images/1.jpg" alt="">
</div>
<div class="item">
<img src="images/2.jpg" alt="">
</div>
<div class="item">
<img src="images/3.jpg" alt="">
</div>
</div>
<!-- 下面2个超链接是左右阴影加箭头块,实现向左或向右切换 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<!--<span class="sr-only">Previous</span>-->
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<!--<span class="sr-only">Next</span>-->
</a>
</div>