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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
js通过canvas生成图片缩略图
Oct 02 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
php下载文件的代码示例
2012/06/29 PHP
PHP编码转换
2012/11/05 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python实现给字典添加条目的方法
2014/09/25 Python
python函数局部变量用法实例分析
2015/08/04 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
python实现多张图片拼接成大图
2019/01/15 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python3 求约数的实例
2019/12/05 Python
python画图常规设置方式
2020/03/05 Python
python实现图像全景拼接
2020/03/27 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
财务出纳岗位职责
2014/02/03 职场文书
表彰大会新闻稿
2015/07/17 职场文书
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL
python双向链表实例详解
2022/05/25 Python