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 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
关于使用js算总价的问题
Jun 23 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 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
类的另类用法--数据的封装
2006/10/09 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
php返回json数据函数实例
2014/10/09 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
python定时器(Timer)用法简单实例
2015/06/04 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
Python算法应用实战之栈详解
2017/02/04 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
办公室年终个人自我评价
2013/10/28 职场文书
实习生自荐信范文分享
2013/11/27 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
计算机系本科生求职信
2014/05/31 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书