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">‹
> </a>
> <a class="carousel-control right" href="#myCarousel"
> data-slide="next">›
> </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">‹
> </a>
> <a class="carousel-control right" href="#myCarousel"
> data-slide="next">›
> </a>
> </div>

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

内容参考：

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

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