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变量类型
Jul 08 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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
使用数据库保存session的方法
2006/10/09 PHP
php二分法在IP地址查询中的应用
2008/08/12 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
小程序云开发实战小结
2018/10/25 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
办公室助理岗位职责
2013/12/25 职场文书
简历自我评价怎么写好呢?
2014/01/04 职场文书
学籍证明模板
2014/11/21 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
DE1103使用报告
2022/04/05 无线电
instantclient客户端 连接oracle数据库
2022/04/26 Oracle