轮播效果

图片太多一次性展示不完，就可以用轮播效果，而轮播效果代码块如下：

<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>