编程 Javascript

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

Posted in Javascript onDecember 30, 2016

今天学习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">‹</span>
    </a>
    <a class="carousel-control right" data-target="#slide" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
     <span class="sr-only">›</span>
    </a>
   </div>
  </div>
 </div>
</body>

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

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

- Author -

cullinans

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js弹出层之1：JQuery.Boxy (二)

Oct 06 Javascript

javascript 实现简单的table排序及table操作练习

Dec 28 Javascript

jquery获取元素值的方法(常见的表单元素)

Nov 15 Javascript

Javascript原型链和原型的一个误区

Oct 22 Javascript

JavaScript中的数值范围介绍

Dec 29 Javascript

js强制把网址设为默认首页

Sep 29 Javascript

jQuery实现的无限级下拉菜单功能示例

Sep 12 Javascript

JavaScript常见事件对象与操作实例总结

Jan 05 Javascript

JS 设计模式之：工厂模式定义与实现方法浅析

May 06 Javascript

JavaScript中window和document用法详解

Jul 28 Javascript

js实现鼠标拖曳效果

Dec 30 Javascript

详解vue之自行实现派发与广播(dispatch与broadcast)

Jan 19 Vue.js

jQuery Ajax 实现在html页面实时显示用户登录状态

Dec 30 #Javascript

javascript实现简单的可随机变色网页计算器示例

Dec 30 #Javascript

ionic2 tabs使用 Modal底部tab弹出框

Dec 30 #Javascript

JS实现改变HTML上文字颜色和内容的方法

Dec 30 #Javascript

jQuery中页面返回顶部的方法总结

Dec 30 #Javascript

jQuery中select与datalist制作下拉菜单时的区别浅析

Dec 30 #Javascript

JS实现全屏的四种写法

Dec 30 #Javascript