Bootstrap图片轮播效果详解


Posted in Javascript onOctober 17, 2017

导言

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

示例

下面演示图片的轮播,使用bootstrap中的Carousel显示循环播放元素插件。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>

 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
  <div class="item active">
   <img src="..." alt="...">
   <div class="carousel-caption">
    ...
   </div>
  </div>
  <div class="item">
   <img src="..." alt="...">
   <div class="carousel-caption">
    ...
   </div>
  </div>
  ...
 </div>

 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
 </a>
</div>

在src中插入图片已为图片设置大小

Bootstrap图片轮播效果详解

还可以为其加上标题

<div class="item">
 <img src="..." alt="...">
 <div class="carousel-caption">
 <h3>...</h3>
 <p>...</p>
 </div>
</div>

Bootstrap图片轮播效果详解

参考

1.Bootstrap官网中文文档

2.菜鸟学堂Bootstrap教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
枚举JavaScript对象的函数
Dec 22 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
vue组件之Alert的实现代码
Oct 17 #Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 #Javascript
vue-cli之router基本使用方法详解
Oct 17 #Javascript
教你用Cordova打包Vue项目的方法
Oct 17 #Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 #Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 #Javascript
javascript 中模板方法单例的实现方法
Oct 17 #Javascript
You might like
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
JS功能代码集锦
2016/05/04 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python跳出循环语句continue与break的区别
2014/08/25 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
解决python flask中config配置管理的问题
2019/07/26 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Python 转换文本编码实现解析
2019/08/27 Python
关于python中的xpath解析定位
2020/03/06 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
简单英文演讲稿
2014/01/01 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
信息管理专业自荐书
2014/06/05 职场文书
生物科学专业自荐书
2014/06/20 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
导游词300字
2015/02/13 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
公司员工体检通知
2015/04/21 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android