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

故里桃花落无踪,小楼轩窗山影重。若见瘦湖病西子,凋零秋风映山红。正是荷花成熟的季节,一朵朵荷花含苞怒放,满田野里的荷田闪烁着金光,一簇簇的荷花有的带着水珠乍开,有的含苞吐蕾,有的像个含羞的少女似开非开。

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

<!DOCTYPE html> 
<html> 
 <head> 
 <title>轮播</title> 
 <link rel="stylesheet" rel="nofollow noopener noreferrer" 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" rel="nofollow noopener noreferrer" href="#circleContent" data-slide="prevent">‹</a> 
 <a class="carousel-control right" rel="nofollow noopener noreferrer" href="#circleContent" data-slide="next">›</a> 
 </div> 
 </body> 
</html> 

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

Bootstrap学习好代码教程

Bootstrap实战好代码教程

Bootstrap Table使用好代码教程

Bootstrap插件使用好代码教程

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

本文bootstrap实现每隔5秒自动轮播效果到此结束。累累的创伤就是生命给你最好的礼物,因为在每个创伤上面都标志着前进的一步。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
用js实现每隔一秒刷新时间的实例(含年月日时分秒)

JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题

jQuery实现每隔一段时间自动更换样式的方法分析

js每隔两秒输出数组中的一项(实例)

JS利用cookies设置每隔24小时弹出框