基于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继承的实现代码
Aug 05 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
JS实现纸牌发牌动画
Jan 19 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中Cookie与Session的异同
2016/02/19 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
js变换显示图片的实例
2013/04/16 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
Python面向对象编程基础实例分析
2020/01/17 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
精通CAD能手自荐书
2014/01/31 职场文书
境外导游求职信
2014/02/27 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL