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面象对象设计
Apr 28 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
vue @click.native 绑定原生点击事件
Apr 22 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
You might like
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
深入了解js原型模式
2019/05/30 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
vue中是怎样监听数组变化的
2020/10/24 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python字符串处理实现单词反转
2017/06/14 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
Python 异常处理的实例详解
2017/09/11 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
python如何构建mock接口服务
2021/01/28 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
城市轨道专业个人求职信范文
2013/09/23 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
幼教求职信
2014/03/12 职场文书
动物科学专业求职信
2014/07/27 职场文书
监察建议书
2015/02/04 职场文书
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby