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高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
js动态引入的四种方法
May 05 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
React全家桶环境搭建过程详解
May 18 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
vue实现表单录入小案例
Sep 27 Javascript
JS实现简单的表格增删
Jan 16 Javascript
Vue SSR 即时编译技术的实现
May 06 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
php一维二维数组键排序方法实例总结
2014/11/13 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
JavaScript 图像动画的小demo
2012/05/23 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
js实现图片轮播效果
2015/12/19 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python 把列表转化为字符串的方法
2018/10/23 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
深入浅析Python代码规范性检测
2020/07/31 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
大学生写自荐信的技巧
2014/01/08 职场文书
简短大学毕业感言
2014/01/18 职场文书
学习计划书怎么写
2014/09/15 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
承诺函格式模板
2015/01/21 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
观后感的写法
2015/06/19 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python