BootStrap实现轮播图效果(收藏)

更新时间：2016年12月30日 16:50:55 作者：cullinans

这篇文章主要介绍了BootStrap实现轮播图效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下

今天学习bootstrap，发现轮播图的实现很强大，于是记录下来，方便自己以后使用。

1：相关知识总结

carousel slide：整个轮播图的最外边一层的样式
   data-ride：用于标记轮播在页面加载时就开始动画播放
   data-interval：自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环
   data-wrap：轮播是否连续循环
 carousel-indicators：轮播图的小圆点
   data-target：
   data-slide-to：向轮播传递一个原始滑动索引
 carousel-inner：图片容器层的样式
    data-slide： 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置

2：demo

<body>
 <div class="container">
  <div class="row">
   <div class="carousel slide" id="slide" data-ride="carousel" data-interval="2000" data-wrap="true">
    <!--轮播图的小圆点-->
    <ol class="carousel-indicators">
     <li data-target="#slide" data-slide-to="0" class="active"></li>
     <li data-target="#slide" data-slide-to="1"></li>
    </ol>
    <!--整个轮播图的div-->
    <div class="carousel-inner">
      <div class="item active">
       <img src="./image/p1.jpg" alt="">
       <div class="carousel-caption">
        <h3>商城</h3>
        <p>第一张图片</p>
       </div>
      </div>
      <div class="item">
       <img src="./image/p2.jpg" alt="">
       <div class="carousel-caption">
        <h3>商城</h3>
        <p>第二张图片</p>
       </div>
      </div>
    </div>
    <a class="carousel-control left" data-target="#slide" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
     <span class="sr-only">&lsaquo;</span>
    </a>
    <a class="carousel-control right" data-target="#slide" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
     <span class="sr-only">&rsaquo;</span>
    </a>
   </div>
  </div>
 </div>
</body>

以上所述是小编给大家介绍的BootStrap实现轮播图效果(收藏)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

JS onmousemove鼠标移动坐标接龙DIV效果实例
这篇文章主要介绍了JS onmousemove鼠标移动坐标接龙DIV效果实例，有需要的朋友可以参考一下
2013-12-12
Bootstrap框架的学习教程详解(二)
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。本文给大家介绍Bootstrap框架的学习教程详解，对bootstrap框架感兴趣的朋友跟着小编一起学习吧
2016-10-10
JavaScript实现简单的拖拽效果
这篇文章主要为大家详细介绍了JavaScript实现简单的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
JavaScript中匿名函数的递归调用
本文主要介绍了JavaScript中匿名函数的递归调用。具有很好的参考价值，下面跟着小编一起来看下吧
2017-01-01
JavaScript中的类(Class)详细介绍
这篇文章主要介绍了JavaScript中的类(Class)详细介绍,本文讲解了JavaScript中类的定义、JavaScript中的Constructor(构造函数)、类名等内容,需要的朋友可以参考下
2014-12-12
layui实现鼠标移动到单元格上显示数据的方法
今天小编就为大家分享一篇layui实现鼠标移动到单元格上显示数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
DOM 事件的深入浅出（一）
本文主要介绍了不同DOM级别下的事件处理程序，同时介绍了事件冒泡和捕获的触发原理和方法。熟练地使用不同级别的DOM事件并且解决相应的浏览器兼容性问题对我们的前端项目开发会很有帮助。
2016-12-12
判断文件是否正在被使用的JS代码
这篇文章主要介绍了判断文件是否正在被使用的JS代码，有需要的朋友可以参考一下
2013-12-12
js中的数组Array定义与sort方法使用示例
Array定义与sort方法在使用过程中还是比较常见的，下面为大家介绍下Array的定义及sort方法使用示例
2013-08-08
JavaScript前端静态资源预加载实现示例
这篇文章主要为大家介绍了JavaScript前端静态资源预加载实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11