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