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 相关文章推荐
js调用后台servlet方法实例
Jun 09 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
angularjs性能优化的方法
Sep 05 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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 strtr() 函数使用说明
2008/11/21 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
微信红包随机生成算法php版
2016/07/21 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
python如何调用java类
2020/07/05 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
Python字典dict常用方法函数实例
2020/11/09 Python
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
2014年学校工会工作总结
2014/12/06 职场文书
教务处干事工作总结
2015/08/14 职场文书
学校就业保障协议书
2019/06/24 职场文书
500字作文之周记
2019/12/13 职场文书
python爬虫selenium模块详解
2021/03/30 Python