轻松实现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 相关文章推荐
基于jquery的表头固定的若干方法
Jan 27 Javascript
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
二维码条形码生成的JavaScript脚本库
Jul 07 Javascript
探析浏览器执行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/05/28 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP 中常量的知识整理
2017/04/14 PHP
php语法检查的方法总结
2019/01/21 PHP
js 数组操作代码集锦
2009/04/28 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
浅析JS抽象工厂模式
2017/12/14 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Python文件读取的3种方法及路径转义
2015/06/21 Python
python爬虫基本知识
2018/03/05 Python
OpenCV 边缘检测
2019/07/10 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
助人为乐表扬信范文
2014/01/14 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书