基于BootStrap的图片轮播效果展示实例代码


Posted in Javascript onMay 23, 2016

先给大家展示下bootstrap图片轮播图,效果如下所示,如果大家感觉效果还不错,请继续往下阅读,参考实现代码。

基于BootStrap的图片轮播效果展示实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>图片轮播_01</title>
<!-- Bootstrap -->
<link href="../bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!--
作者:凯尔
时间:2016-02-20
描述:
carousel
date-interval="4000"停留时间/幅图
支持键盘左右方向键对图片进行轮播方向选择
-->
<div class="container">
<div style="width:960px;height: 400px;margin: auto;padding: auto;">
<div id="carousel-example-generic" class="carousel slide">
<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" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="../img/图片轮播/pic01.jpg" />
</div>
<div class="item">
<img src="../img/图片轮播/pic02.jpg" />
<!--
图片上要显示的文字
-->
<div class="carousel-caption">
<h3>联想校园大使</h3></div>
</div>
<div class="item">
<img src="../img/图片轮播/pic03.jpg" />
</div>
<div class="item">
<img src="../img/图片轮播/pic04.jpg" />
</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>
</div>
</div>
<!--设定时间间隔,通过JavaScript,这样做相对于css属性设定而言,可以自启动,无需人为进行干预-->
<script>
$(".carousel").carousel({
interval: 4000
})
</script>
</body>
</html>

以上所述是小编给大家介绍的基于BootStrap的图片轮播效果展示实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 编写规范
Mar 03 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
input按钮的事件处理大全
Dec 10 Javascript
jquery自定义属性(类型/属性值)
May 21 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
AngularJS上拉加载问题解决方法
May 23 #Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 #Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 #Javascript
用js实现放大镜的效果的简单实例
May 23 #Javascript
jQuery实现摸拟alert提示框
May 22 #Javascript
javascript实现标签切换代码示例
May 22 #Javascript
超实用的JavaScript代码段 附使用方法
May 22 #Javascript
You might like
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
拖动一个HTML元素
2006/12/22 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
了解重排与重绘
2019/05/29 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
pandas string转dataframe的方法
2018/04/11 Python
python之super的使用小结
2018/08/13 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
学python需要去培训机构吗
2020/07/01 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
什么是就业协议书
2014/04/17 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
客户答谢会致辞
2015/07/30 职场文书
高中运动会广播稿
2015/08/19 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js