基于Bootstrap实现图片轮播效果


Posted in Javascript onMay 22, 2016

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
基于Vue.js的表格分页组件
May 22 #Javascript
js正则表达式replace替换变量方法
May 21 #Javascript
深入解析JavaScript中的立即执行函数
May 21 #Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 #Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 #Javascript
基于javascript实现表格的简单操作
May 21 #Javascript
javascript检测移动设备横竖屏
May 21 #Javascript
You might like
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
python安装requests库的实例代码
2019/06/25 Python
pandas中的series数据类型详解
2019/07/06 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
创业计划书的主要内容有哪些
2014/01/29 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL