基于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 相关文章推荐
Javascript结合css实现网页换肤功能
Nov 02 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
jquery拖动改变div大小
Jul 04 jQuery
Vue slot用法(小结)
Oct 22 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 Javascript
微信小程序实现手指拖动选项排序
Apr 22 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
PHP安全配置
2006/10/09 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
python将unicode转为str的方法
2017/06/21 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
python deque模块简单使用代码实例
2020/03/12 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
用Python实现职工信息管理系统
2020/12/30 Python
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
Linux Interview Questions For software testers
2013/05/17 面试题
实习推荐信
2014/05/10 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
工作证明格式及范本
2014/09/12 职场文书
2014年度个人总结范文
2015/03/09 职场文书
如何做好工作总结!
2019/04/10 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
python 对图片进行简单的处理
2021/06/23 Python