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实现日期格式转换
Dec 16 Javascript
原生js实现日期联动
Jan 12 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
vue双向绑定数据限制长度的方法
Nov 04 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
jQuery使用技巧简单汇总
2013/04/18 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python元组的概念知识点
2019/11/19 Python
python实现字典嵌套列表取值
2019/12/16 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
业务经理岗位职责
2013/11/11 职场文书
新闻记者个人求职的自我评价
2013/11/28 职场文书
保证书范文大全
2014/04/28 职场文书
党支部特色活动方案
2014/08/20 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书