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 相关文章推荐
Javascript 自定义类型方法小结
Mar 02 Javascript
JS链式调用的实现方法
Mar 07 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
js实现放大镜特效
May 18 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
详解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实现的SESSION类
2014/12/02 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
js loading加载效果实现代码
2009/11/24 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Python实现的爬虫功能代码
2017/06/24 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
python 实现矩阵填充0的例子
2019/11/29 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
法学毕业生自荐信
2013/11/13 职场文书
公司门卫管理制度
2014/02/01 职场文书
项目合作协议书
2014/09/23 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
员工年终考核评语
2014/12/31 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL