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中的数学函数
Apr 04 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
JS实现骰子3D旋转效果
2019/10/24 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python opencv之SURF算法示例
2018/02/24 Python
简单实现Python爬取网络图片
2018/04/01 Python
python中的print()输出
2019/04/12 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
请介绍一下Ant
2016/07/22 面试题
大学四年学习的自我评价分享
2013/12/09 职场文书
参观监狱心得体会
2014/01/02 职场文书
顶岗实习计划书
2014/01/10 职场文书
公益广告语集锦
2014/03/13 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
诚信承诺书模板
2014/05/26 职场文书
党校学习个人总结
2015/02/15 职场文书
降价通知函
2015/04/23 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript