bootstrap轮播图组件

一、轮播图组件模板（官方文档）

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- 指示器 -->

        <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>

        <!-- 轮播图片及说明文字 -->

        <div class="carousel-inner" role="listbox">

          <div class="item active">

            <img src="..." alt="图片1">

            <div class="carousel-caption">

              ...

            </div>

          </div>

          <div class="item">

            <img src="..." alt="图片2">

            <div class="carousel-caption">

              ...

            </div>

          </div>

        </div>

        <!-- 控制按钮：左右切换 -->

        <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>

二、分析轮播图组件结构

①carousel 轮播图的模块， slide是否加上滑动效果，data-ride="carousel" 初始化轮播图属性

②data-target="#carousel-example-generic" 控制目标轮播图，data-slide-to="数字" 控制的是轮播图当中的第几张（索引），class="active" 当前选中的点

③role="listbox" 提供给屏幕阅读器使用，class="carousel-inner"需要轮播的容器，每一个容器里class="item"包括轮播图片img和图片的说明性文字carousel-caption

④left carousel-control是切换上一张的按钮，right carousel-control是切换下一张的按钮，其中的data-slide="next/prev"声明左滑还是右滑，aria-hidden和sr-only是提供给屏幕阅读器使用

三、精简版轮播图模板

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- 指示器 -->

        <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>

        <!-- 轮播图片及说明文字 -->

        <div class="carousel-inner" role="listbox">

          <div class="item active">

            <img src="..." alt="图片1">

          </div>

          <div class="item">

            <img src="..." alt="图片2">

          </div>

          <div class="item">

            <img src="..." alt="图片3">

          </div>

        </div>

        <!-- 控制按钮：左右切换 -->

        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

          <span class="glyphicon glyphicon-chevron-left"></span>

        </a>

        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

          <span class="glyphicon glyphicon-chevron-right"></span>

        </a>

      </div>

四、例子：在PC端使用轮播图（高度固定，图片居中，容器铺满，使用背景图）

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- 指示器 -->

        <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>

        <!-- 轮播图片及说明文字 -->

        <div class="carousel-inner" role="listbox">

          <div class="item active">

            <a href="#" class="pc_imgBox" style="background-image: url('images/2-1.png')"></a>

          </div>

          <div class="item">

            <a href="#" class="pc_imgBox" style="background-image: url('images/2-2.png')"></a>

          </div>

          <div class="item">

            <a href="#" class="pc_imgBox" style="background-image: url('images/2-3.png')"></a>

          </div>

        </div>

        <!-- 控制按钮：左右切换 -->

        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

          <span class="glyphicon glyphicon-chevron-left"></span>

        </a>

        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

          <span class="glyphicon glyphicon-chevron-right"></span>

        </a>

      </div>

        .pc_imgBox{

            display: block;

            height: 400px;

            width: 100%;

            background-size: cover;

            background-position:  center;

            background-repeat: no-repeat;

        }

        .carousel-indicators{

            background: #ccc;

        }

五、例子：在移动端使用轮播图（宽度自适应，高度自动变化，使用img引入图片）

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- 指示器 -->

        <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>

        <!-- 轮播图片及说明文字 -->

        <div class="carousel-inner" role="listbox">

          <div class="item active">

            <a href="#" class="pc_imgBox"><img src="data:images/1-1.png" alt=""></a>

          </div>

          <div class="item">

            <a href="#" class="m_imgBox"><img src="data:images/1-2.png" alt=""></a>

          </div>

          <div class="item">

            <a href="#" class="m_imgBox"><img src="data:images/1-3.png" alt=""></a>

          </div>

        </div>

        <!-- 控制按钮：左右切换 -->

        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

          <span class="glyphicon glyphicon-chevron-left"></span>

        </a>

        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

          <span class="glyphicon glyphicon-chevron-right"></span>

        </a>

      </div>

        .m_imgBox{

            display: block;

            width: 100%;

        }

        .carousel-indicators{

            background: #ccc;

        }

六、例子：响应式的轮播图（利用媒体查询自适应PC端和移动端）

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- 指示器 -->

        <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>

        <!-- 轮播图片及说明文字 -->

        <div class="carousel-inner" role="listbox">

          <div class="item active">

            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url('images/2-1.png')"></a>

            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="data:images/1-1.png" alt=""></a>

          </div>

          <div class="item">

            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url('images/2-2.png')"></a>

            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="data:images/1-2.png" alt=""></a>

          </div>

          <div class="item">

            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url('images/2-3.png')"></a>

            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="data:images/1-3.png" alt=""></a>

          </div>

        </div>

        <!-- 控制按钮：左右切换 -->

        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

          <span class="glyphicon glyphicon-chevron-left"></span>

        </a>

        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

          <span class="glyphicon glyphicon-chevron-right"></span>

        </a>

      </div>

        .pc_imgBox{

            display: block;

            height: 400px;

            width: 100%;

            background-size: cover;

            background-position:  center;

            background-repeat: no-repeat;

        }

        .m_imgBox{

            display: block;

            width: 100%;

        }

        .carousel-indicators{

            background: #ccc;

        }

巴特西