bootstrap实现每隔5秒自动轮播效果


Posted in Javascript onDecember 20, 2016

本文实例为大家分享了bootstrap轮播的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
 <head> 
 <title>轮播</title> 
 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <style> 
 #circleContent{ 
 width:150px; 
 height:150px; 
 } 
 </style> 
 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 <script> 
 $(document).ready(function(){ 
 $('#circleContent').carousel({interval:5000});//每隔5秒自动轮播 
 }); 
 </script> 
 </head> 
 <body> 
 <div id="circleContent" class="carousel slide"> 
 <ol class="carousel-indicators"> 
 <li data-target="#circleContent" data-slide-to="0" class="active"></li> 
 <li data-target="#circleContent" data-slide-to="1"></li> 
 <li data-target="#circleContent" data-slide-to="2"></li> 
 </ol> 
 <div class="carousel-inner"> 
 <div class="item active"> 
  <img src="images/circle1.png"> 
  <div class="carousel-caption">IMG1</div> 
 </div> 
 <div class="item"> 
  <img src="images/circle2.png"> 
  <div class="carousel-caption">IMG2</div> 
 </div> 
 <div class="item"> 
  <img src="images/circle3.png"> 
  <div class="carousel-caption">IMG3</div> 
 </div> 
 </div> 
 <a class="carousel-control left" href="#circleContent" data-slide="prevent">‹</a> 
 <a class="carousel-control right" href="#circleContent" data-slide="next">›</a> 
 </div> 
 </body> 
</html>

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

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

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

Javascript 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
js替代copy(示例代码)
Nov 27 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
bootstrap多种样式进度条展示
Dec 20 #Javascript
JS封装通过className获取元素的函数示例
Dec 20 #Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 #Javascript
jquery+html仿翻页相册功能
Dec 20 #Javascript
JS实现拖拽的方法分析
Dec 20 #Javascript
JS实现Ajax的方法分析
Dec 20 #Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 #Javascript
You might like
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
用PHP开发GUI
2006/10/09 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
一个JS翻页效果
2007/07/23 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
Python实现的石头剪子布代码分享
2014/08/22 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
python实现批量注册网站用户的示例
2019/02/22 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
保证书范文大全
2014/04/28 职场文书
本科毕业生自荐信
2014/06/02 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
机关工会工作总结2015
2015/05/26 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
MySQL视图概念以及相关应用
2022/04/19 MySQL