在bootstrap中实现轮播图实例代码

 更新时间:2017年06月11日 16:15:53   作者:duanmingyue789  
Bootstrap中轮播图插件叫作Carousel ,下面通过本文给大家详细介绍了bootstrop中实现轮播图效果,需要的朋友参考下

Bootstrap中轮播图插件叫作Carousel

以下容器就是整个轮播图组件的整体,

注意该盒子必须加上 class=”carousel slide” data-ride=”carousel” 表示当 前是一个轮播图

bootstrap.js会自动为当前元素添加图片轮播的特效

<div id="轮播图的ID" class="carousel slide" data-ride="carousel"> 
 <!-- ol标签是图片轮播的控制点 -->
 <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>
  <!-- ...更多的 -->
</ol>
 <!-- 
  .carousel-inner是所有轮播项的容器盒子,
  注意role="listbox"代表当前div是一个列表盒子,作用就是给当前div添加  一个语义
 -->
 <div class="carousel-inner" role="listbox">
  <!-- 每一个.item就是单个轮播项目,注意默认要给第一个轮播项目加上active,表示为焦点 -->
  <div class="item active">
   <!-- 轮播项目中展示的图片 -->
   <img src="example.jpg" alt="示例图片">
   <div class="carousel-caption">
    <!-- 标题或说明性文字,如果不需要,直接删除当前div.carousel-caption -->
   </div>
  </div>
  <div class="item">
   <!-- ... -->
  </div>
  <!-- ... -->
 </div>
  <!-- 图片轮播上左右两个控制按钮,分别点击可以滚动到上一张和下一张 -->
 <!-- 此处需要注意的是 该a链接的href属性必须指向需要控制的轮播图ID -->
 <!-- 另外a链接中的data-slide="prev"代表点击该链接会滚到上一张,如果设置为next的话则相反 -->
 <a class="left carousel-control" href="#轮播图的ID" rel="external nofollow" rel="external nofollow" 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" rel="external nofollow" rel="external nofollow" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">下一张</span>
 </a>
</div>

以上所述是小编给大家介绍的在bootstrop中实现轮播图的实例代码,希望对大家有所帮助!

相关文章

  • 深入理解Javascript闭包 新手版

    深入理解Javascript闭包 新手版

    最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业。对于初学者来说别说理解闭包了,就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。
    2010-12-12
  • FireFox与IE 下js兼容触发click事件的代码

    FireFox与IE 下js兼容触发click事件的代码

    FireFox与IE 下js兼容触发click事件 ,对于需要兼容这两者的朋友,就需要参考下下面的代码了
    2008-11-11
  • JavaScript资源预加载组件和滑屏组件的使用推荐

    JavaScript资源预加载组件和滑屏组件的使用推荐

    这篇文章主要介绍了JavaScript资源预加载组件和滑屏组件的使用推荐,分别为preload和slide的用法讲解,使用起来非常简单,需要的朋友可以参考下
    2016-03-03
  • javascript 中null和undefined区分和比较

    javascript 中null和undefined区分和比较

    这篇文章主要介绍了javascript 中null和undefined区分和比较的相关资料,需要的朋友可以参考下
    2017-04-04
  • JavaScript实现刷新不重记的倒计时

    JavaScript实现刷新不重记的倒计时

    网上关于JavaScript实现倒计时的文章有很多,但是一般都是刷新后会重新开始计时,可是我们有的时候会需要刷新却不重新计算的倒计时,这该怎么做呢?下面我们一起来看看这种倒计时怎么实现吧。
    2016-08-08
  • JavaScript中为事件指定处理程序的五种方式分析

    JavaScript中为事件指定处理程序的五种方式分析

    这篇文章主要介绍了JavaScript中为事件指定处理程序的五种方式,结合实例形式简单分析了JavaScript事件处理的相关原理与事件指定处理程序的五种常用方式,需要的朋友可以参考下
    2018-07-07
  • Layui动态生成select下拉选择框不显示的解决方法

    Layui动态生成select下拉选择框不显示的解决方法

    今天小编就为大家分享一篇Layui动态生成select下拉选择框不显示的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • es6 super关键字的理解与应用实例分析

    es6 super关键字的理解与应用实例分析

    这篇文章主要介绍了es6 super关键字的理解与应用,结合实例形式分析了es6 super关键字的功能、原理、用法及相关操作注意事项,需要的朋友可以参考下
    2020-02-02
  • JavaScript表单焦点自动切换代码

    JavaScript表单焦点自动切换代码

    这篇文章主要介绍了JavaScript表单焦点自动切换代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • 微信小程序实现弹出层效果

    微信小程序实现弹出层效果

    这篇文章主要为大家详细介绍了微信小程序实现常见弹出层效果 ,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11

最新评论