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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
js实现列表按字母排序
2020/08/11 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
Django视图和URL配置详解
2018/01/31 Python
python 对象和json互相转换方法
2018/03/22 Python
python虚拟环境迁移方法
2019/01/03 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python解析多帧dicom数据详解
2020/01/13 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
印度在线杂货店:bigbasket
2018/08/23 全球购物
How TDD works
2012/09/30 面试题
医药工作者的求职信范文
2013/09/21 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
家长评语和期望
2014/02/10 职场文书
家长对老师的感言
2014/03/11 职场文书
公司授权委托书范文
2014/08/02 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python