查看更多精彩前端资源

【前言】

       轮播图效果是比较常见的一种广告展示特效，网上也会有各种各种的一些插件来实现这个效果，这里，boostrap的使用介绍将会作为一个系列，本编介绍的是在boostrap中如何使用其组件事件轮播图效果

【轮播图结构分析】

• 一个轮播图片主要包括三个部分：
• 轮播的图片
• 轮播图片的计数器
• 轮播图片的控制器
  

【引入文件】

Bootstrap的js组件依赖jquery，所以在在引入bootstrap.js之前，需要先引入jquery

[HTML] 纯文本查看 复制代码

<link rel="stylesheet" href="lib/css/bootstrap.css">

<script src="lib/js/jquery.v1.12.4.js"></script>

<script src="lib/js/bootstrap.js"></script>

【步骤】

第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式， class="carousel slide"data-ride="carousel" 表示当前是一个轮播图，bootstrap.js会自动为当前元素添加图片轮播的特效并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发

[HTML] 纯文本查看 复制代码

<div id="轮播图的ID" class="carousel slide" data-ride="carousel">

</div>

第二步：设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有顺列表来制作：

[HTML] 纯文本查看 复制代码

<ol class="carousel-indicators">

    <!--

      每一个li就是一个单独的控制点

        data-target属性就是指定当前控制点控制的是哪一个轮播图，其目的是如果界面上有多个轮播图，便于区分到底控制哪一个

        data-slide-to属性是指当前的li元素绑定的是第几个轮播项

      注意，默认必须给其中某个li加上active，展示的时候就是焦点项目

    -->

    <li data-target="#轮播图的ID" data-slide-to="0" class="active"></li>

    <li data-target="#轮播图的ID" data-slide-to="1"></li>

    <li data-target="#轮播图的ID" data-slide-to="1"></li>

    <!-- ...更多的 -->

  </ol>

第三步：设计轮播图片播放区。轮播图整个效果中，播放区是最关键的一个区域，这个区域主要用来放置需要轮播的图片。这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片：

   

[HTML] 纯文本查看 复制代码

   <div class="carousel-inner" role="listbox">[/align]
    <!-- 每一个.item就是单个轮播项目，注意默认要给第一个轮播项目加上active，表示为焦点 -->

    <div class="item active">

      <!-- 轮播项目中展示的图片 -->

      <img src="./images/carousel.jpg" height="200" width="880" alt="示例图片">

      <div class="carousel-caption">

        <!-- 标题或说明性文字，如果不需要，直接删除当前div.carousel-caption -->

      </div>

    </div>

    <div class="item">

      <img src="./images/carousel1.jpg" height="200" width="880" alt="示例图片">

    </div>

    <div class="item">

      <img src="./images/carousel2.jpg" height="200" width="880" alt="示例图片">

    </div>

    <!-- ... -->

  </div>

第四步：图片轮播上左右两个控制按钮，分别点击可以滚动到上一张和下一张。此处需要注意的是 该a链接的href属性必须指向需要控制的轮播图ID 。

另外a链接中的data-slide="prev"代表点击该链接会滚到上一张，如果设置为next的话则相反。

[HTML] 纯文本查看 复制代码

<a class="left carousel-control" href="#轮播图的ID" role="button" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

    <span class="sr-only">上一张</span>

  </a>

  <a class="right carousel-control" href="#轮播图的ID" role="button" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">下一张</span>

  </a>

【效果展示】

      

查看更多精彩前端资源

【前言】

       轮播图效果是比较常见的一种广告展示特效，网上也会有各种各种的一些插件来实现这个效果，这里，boostrap的使用介绍将会作为一个系列，本编介绍的是在boostrap中如何使用其组件事件轮播图效果

【轮播图结构分析】

• 一个轮播图片主要包括三个部分：
• 轮播的图片
• 轮播图片的计数器
• 轮播图片的控制器
  

【引入文件】

Bootstrap的js组件依赖jquery，所以在在引入bootstrap.js之前，需要先引入jquery

[HTML] 纯文本查看 复制代码

<link rel="stylesheet" href="lib/css/bootstrap.css">

<script src="lib/js/jquery.v1.12.4.js"></script>

<script src="lib/js/bootstrap.js"></script>

【步骤】

第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式， class="carousel slide"data-ride="carousel" 表示当前是一个轮播图，bootstrap.js会自动为当前元素添加图片轮播的特效并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发

[HTML] 纯文本查看 复制代码

<div id="轮播图的ID" class="carousel slide" data-ride="carousel">

</div>

第二步：设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有顺列表来制作：

[HTML] 纯文本查看 复制代码

<ol class="carousel-indicators">

    <!--

      每一个li就是一个单独的控制点

        data-target属性就是指定当前控制点控制的是哪一个轮播图，其目的是如果界面上有多个轮播图，便于区分到底控制哪一个

        data-slide-to属性是指当前的li元素绑定的是第几个轮播项

      注意，默认必须给其中某个li加上active，展示的时候就是焦点项目

    -->

    <li data-target="#轮播图的ID" data-slide-to="0" class="active"></li>

    <li data-target="#轮播图的ID" data-slide-to="1"></li>

    <li data-target="#轮播图的ID" data-slide-to="1"></li>

    <!-- ...更多的 -->

  </ol>

第三步：设计轮播图片播放区。轮播图整个效果中，播放区是最关键的一个区域，这个区域主要用来放置需要轮播的图片。这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片：

   

[HTML] 纯文本查看 复制代码

   <div class="carousel-inner" role="listbox">[/align]
    <!-- 每一个.item就是单个轮播项目，注意默认要给第一个轮播项目加上active，表示为焦点 -->

    <div class="item active">

      <!-- 轮播项目中展示的图片 -->

      <img src="./images/carousel.jpg" height="200" width="880" alt="示例图片">

      <div class="carousel-caption">

        <!-- 标题或说明性文字，如果不需要，直接删除当前div.carousel-caption -->

      </div>

    </div>

    <div class="item">

      <img src="./images/carousel1.jpg" height="200" width="880" alt="示例图片">

    </div>

    <div class="item">

      <img src="./images/carousel2.jpg" height="200" width="880" alt="示例图片">

    </div>

    <!-- ... -->

  </div>

第四步：图片轮播上左右两个控制按钮，分别点击可以滚动到上一张和下一张。此处需要注意的是 该a链接的href属性必须指向需要控制的轮播图ID 。

另外a链接中的data-slide="prev"代表点击该链接会滚到上一张，如果设置为next的话则相反。

[HTML] 纯文本查看 复制代码

<a class="left carousel-control" href="#轮播图的ID" role="button" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

    <span class="sr-only">上一张</span>

  </a>

  <a class="right carousel-control" href="#轮播图的ID" role="button" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">下一张</span>

  </a>

【效果展示】