bootstrap实现图片自动轮播


Posted in Javascript onDecember 21, 2016

bootstrap图片自动轮播效果图:

bootstrap实现图片自动轮播

代码实现:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <link rel="stylesheet" href="bootstrap.min.css" />
 <link rel="stylesheet" href="bootstrap-theme.min.css" />
 <script src="jquery.min.js"></script>
 <script src="bootstrap.min.js"></script>
 <style>
 #div1 {width:600px; height:500px}
 </style>
</head>
<body>
 <div id="div1">
 <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="airplane1.jpg" >
 </div>
 <div class="item">
 <img src="airplane2.jpg" >
 </div>
 <div class="item">
 <img src="airplane3.jpg" >
 </div>
 </div>

 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left" id="aaron1"></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" id="aaron2"></span>
 <span class="sr-only">Next</span>
 </a>
 </div>
 </div>
</body>
<html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上代码可以实现 div1 中的图片自动轮播,轮播时间默认5000ms。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 #Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 #Javascript
详解Vue.js动态绑定class
Dec 20 #Javascript
浅谈Angular的$q, defer, promise
Dec 20 #Javascript
BootStrapTable服务器分页实例解析
Dec 20 #Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 #Javascript
bootstrap多种样式进度条展示
Dec 20 #Javascript
You might like
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP中的事务使用实例
2015/05/26 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
JavaScript延迟加载
2021/03/09 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
react 生命周期实例分析
2020/05/18 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
python 计算文件的md5值实例
2017/01/13 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
市场营销专业自荐书
2014/06/10 职场文书
会计学专业求职信
2014/07/17 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android