轻松实现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 相关文章推荐
Angularjs基础知识及示例汇总
Jan 22 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
PHP制作万年历
2015/01/07 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
常用jQuery代码分享
2015/07/14 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
基于hashlib模块--加密(详解)
2017/06/21 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python实现定时发送qq消息
2019/01/18 Python
centos7之Python3.74安装教程
2019/08/15 Python
python中如何使用insert函数
2020/01/09 Python
tensorflow之并行读入数据详解
2020/02/05 Python
keras得到每层的系数方式
2020/06/15 Python
Python进行特征提取的示例代码
2020/10/15 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
金融专业个人求职信
2013/09/22 职场文书
七一晚会主持词
2015/06/29 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js