bootstrap轮播图carousel插件

发布时间：2020-12-17 20:37:09 所属栏目：安全来源：网络整理

导读：一、基本介绍见：https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html ? 二、例子：在PC端使用轮播图（高度固定，图片居中，容器铺满，使用背景图） div id="carousel-example-generic" class="carousel slide" data-ride="carousel" !-- 指示

一、基本介绍见：https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

二、例子：在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="images/1-1.png" ></a>
          </div>
          <div class="item">
            <a href="#" class="m_imgBox"><img src="images/1-2.png" ></a>
          </div>
          <div class="item">
            <a href="#" class="m_imgBox"><img src="images/1-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>

        .m_imgBox{
            display: block;
            width: 100%;
        }
        .carousel-indicators{
            background: #ccc;
        }

四、例子：响应式的轮播图（利用媒体查询自适应PC端和移动端，注意应用在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="images/1-1.png" ></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="images/1-2.png" ></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="images/1-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;
        }
        .m_imgBox{
            display: block;
            width: 100%;
        }
        .carousel-indicators{
            background: #ccc;
        }

ps:实现轮播图时间间隔改变的两种方式在data-ride后面加上一个属性data-interval=“millisecond”，其中，millisecond为需要设置的毫秒数，如下：<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">使用JavaScript语句实现：官网给出的代码是：$(‘.carousel‘).carousel({interval: 2000});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!