如果按照从前需要在网站上加上幻灯片、图片轮播效果，早年蜗牛做企业网站的时候是使用的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\” h=\”#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\” h=\”#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\” h=\”#myCarousel\”
data-slide=\”prev\”>&lsaquo;
</a>
<a class=\”carousel-control right\” h=\”#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\” h=\”#myCarousel\”
data-slide=\”prev\”>&lsaquo;
</a>
<a class=\”carousel-control right\” h=\”#myCarousel\”
data-slide=\”next\”>&rsaquo;
</a>
</div>

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

内容参考：

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

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