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 相关文章推荐
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
如何通过javaScript去除字符串两端的空白字符
Feb 06 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安全性漫谈
2012/06/28 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
php利用事务处理转账问题
2015/04/22 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
php实现图片压缩处理
2020/09/09 PHP
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
更改Python命令行交互提示符的方法
2015/01/14 Python
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Python实现壁纸下载与轮换
2020/10/19 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
爱护公物演讲稿
2014/09/09 职场文书
综合办公室岗位职责
2015/04/11 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
2019同学聚会主持词
2019/05/06 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS