Bootstrap-v3-js插件-轮播图

轮播图

轮播插件（carousel），一般是将大小相同的图片按照顺序依次播放。

1、轮播实例

1.1 通过data属性调用轮播插件

<!DOCTYPE html>
<html>
  <head>
      <!-- HTML5文档类型 -->
    <meta charset="utf-8">
    <!-- 移动端适配 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 让IE浏览器使用最新的引擎渲染页面 -->
    <mata http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- jquery核心js库 -->
    <script src="js/jquery.js"></script>
    <!-- Bootstrap3核心js库 -->
    <script src="js/bootstrap-v3.js"></script>
    <!-- Bootstrap3核心css库 -->
    <link rel="stylesheet" href="css/bootstrap-v3.css">
    <title>bootstrap插件-轮播图</title>
    <style>
      body{
        padding: 20px;
      }
      #myCarousel1{
        width: 1024px;
      }
    </style>
  </head>
  <body>
    <!-- 1.轮播插件(通过data属性设置轮播插件) -->
    <div class="carousel" id="myCarousel1" data-ride="carousel" data-interval="2000" data-pause="hover" data-wrap="true" data-keyboard="true">
      <!-- 指示器(下方小圆点) -->
      <ul class="carousel-indicators">
        <li data-toggle="#myCarousel1" data-slide-to="0" class="avtive"></li>
        <li data-toggle="#myCarousel1" data-slide-to="1"></li>
        <li data-toggle="#myCarousel1" data-slide-to="2"></li>
        <li data-toggle="#myCarousel1" data-slide-to="3"></li>
      </ul>
      <!-- 滑块(轮播图片) -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="img/cat.jpg">
        </div>
        <div class="item">
          <img src="img/2.jpg">
        </div>
        <div class="item">
          <img src="img/cat.jpg">
        </div>
        <div class="item">
          <img src="img/2.jpg">
        </div>
      </div>
      <!-- 控制器(左右按钮) -->
        <a href="#myCarousel1" class="carousel-control left" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#myCarousel1" class="carousel-control right" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>  
    </div>

  </body>
</html>

1.2 通过js代码调用轮播插件

<!DOCTYPE html>
<html>
  <head>
      <!-- HTML5文档类型 -->
    <meta charset="utf-8">
    <!-- 移动端适配 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 让IE浏览器使用最新的引擎渲染页面 -->
    <mata http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- jquery核心js库 -->
    <script src="js/jquery.js"></script>
    <!-- Bootstrap3核心js库 -->
    <script src="js/bootstrap-v3.js"></script>
    <!-- Bootstrap3核心css库 -->
    <link rel="stylesheet" href="css/bootstrap-v3.css">
    <title>bootstrap插件-轮播图2</title>
    <style>
      body{
        padding: 20px;
      }
      #myCarousel2{
        width: 1024px;
      }
    </style>
  </head>
  <body>
    <!-- 2.轮播插件(通过js代码设置轮播插件) -->
    <div class="carousel" id="myCarousel2" data-ride="carousel"><!--属性用于标记轮播在页面加载时就开始动画播放，无需使用初始化的js函数-->
      <!-- 指示器(下方小圆点) -->
      <ul class="carousel-indicators">
        <li data-toggle="#myCarousel2" data-slide-to="0" class="avtive"></li>
        <li data-toggle="#myCarousel2" data-slide-to="1"></li>
        <li data-toggle="#myCarousel2" data-slide-to="2"></li>
        <li data-toggle="#myCarousel2" data-slide-to="3"></li>
      </ul>
      <!-- 滑块(轮播图片) -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="img/cat.jpg">
        </div>
        <div class="item">
          <img src="img/2.jpg">
        </div>
        <div class="item">
          <img src="img/cat.jpg">
        </div>
        <div class="item">
          <img src="img/2.jpg">
        </div>
      </div>
      <!-- 控制器(左右按钮) -->
      <a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      </a> 
    </div>
    <script>
      //通过js代码设置轮播插件
      $(function(){
        $('#myCarousel2').carousel({
          interval:1000,  //interval表示设置自动播放的间隔时间(默认5秒)
          pause:'hover',  //pause表示鼠标悬停在图片上时是否停止播放(取值：hover/null)
          wrap:'true',    //wrap表示轮播图是否循环播放
          keyboard:true   //keyboard表示是否开启键盘左右键翻看轮播图
        });
      })
    </script>
  </body>
</html>

 带有标题和描述文字的轮播图

        <div class="item active">
          <img src="img/cat.jpg">
          <!-- 带有标题和描述的轮播图 -->
            <div class="carousel-caption">
              <h3>轮播图第一张的标题</h3>
              <p>这是轮播图相关的文字描述，卡卡卡卡卡卡，啦啦啦啦阿拉啦啦</p>
            </div>
        </div>

 

posted @ 2021-09-30 16:07  AnnLing  阅读(814)  评论(0)  编辑  收藏  举报