轻松实现Bootstrap图片轮播


Posted in Javascript onApril 20, 2020

本文实例讲解了Bootstrap实现图片轮播的详细代码,分享给大家供大家参考,具体内容如下

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 <style type="text/css">
 img{
 margin:0 auto;
 }
 </style>
</head>
<body>

 <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="images/lunbo1.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 <div class="item">
 <img src="images/lunbo2.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 <div class="item">
 <img src="images/lunbo3.jpg" height="266" width="800" 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>
</body>
</html>

效果

轻松实现Bootstrap图片轮播

可选参数

  • data-ride=”carousel”:加上可以自动播放,不加点击后才会播放。
  • 添加标题

标题写在 <div class="carousel-caption"></div>之间

例如:

<div class="carousel-caption">
 <h3>果壳推书正式上线</h3>
 <p>好书分享、经验交流</p>
</div>

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

精彩专题分享:jQuery图片轮播 JavaScript图片轮播

以上就是针对javascript图片轮播进行的详细介绍,希望本文对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 #Javascript
学习JavaScript设计模式之策略模式
Jan 12 #Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 #Javascript
jQuery版本升级踩坑大全
Jan 12 #Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 #Javascript
7个jQuery最佳实践
Jan 12 #Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 #Javascript
You might like
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
node内置调试方法总结
2018/02/22 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
python计算文本文件行数的方法
2015/07/06 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
.NET笔试题(20个问题)
2016/02/02 面试题
团代会主持词
2014/04/02 职场文书
代理人委托书
2014/08/01 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
公司庆典主持词
2015/07/04 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python