Bootstrap图片轮播/幻灯图片（Carousel）效果实例整理

如果按照从前需要在网站上加上幻灯片、图片轮播效果，早年老蒋做企业网站的时候是使用的Flash焦点图，后来用jquery幻灯片，虽然手边平时都积累备用几款常用的效果，毕竟这类的实例代码网上很多。但是，如果我们有使用Bootstrap框架那就更简单了，因为脚本框架中内置Carousel可以快速实现。

当然了，这里不能说jquery幻灯片效果不好，如果我们需要使用丰富复杂的还是需要自定义功能的，而默认的Bootstrap自带的也是简单的幻灯图片轮播效果而已。如果我们对于入门级简单需要实现的功能，可以直接参考内置默认的效果，这里整理两个Carousel简单的效果。

第一、官方文档自带的

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

第二、runoob无文字描述

<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<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>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="slide1.png" alt="First slide">
</div>
<div class="item">
<img src="slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="slide3.png" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">&lsaquo;
</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">&rsaquo;
</a>
</div>

图片需要自己定义，且CSS样式可以自己定义。

第三、有文字描述版

<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<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>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="slide1.png" alt="First slide">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="slide2.png" alt="Second slide">
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
<img src="slide3.png" alt="Third slide">
<div class="carousel-caption">标题 3</div>
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">&lsaquo;
</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">&rsaquo;
</a>
</div>

文字标题可选择，可修改自己需要的。

内容参考：

http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

https://v3.bootcss.com/javascript/#carousel

本文出处：老蒋部落 » Bootstrap图片轮播/幻灯图片（Carousel）效果实例整理 | 欢迎分享（ 公众号：老蒋朋友圈 ）