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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！