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实现轮播图效果(收藏),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
JS清除选择内容的方法
Jan 29 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
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
You might like
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python处理cookie详解
2014/02/07 Python
Python实现购物车功能的方法分析
2017/11/10 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
Pytorch之保存读取模型实例
2019/12/30 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
法律专业应届生自荐信范文
2014/01/06 职场文书
民族团结先进个人材料
2014/02/05 职场文书
食品安全责任书
2014/04/15 职场文书
责任书格式范文
2014/07/28 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
田径运动会通讯稿
2015/07/18 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android