bootstrap框架如何实现自动轮播图

这篇文章主要介绍了bootstrap框架如何实现自动轮播图，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

在临洮等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站设计、成都网站建设网站设计制作按需求定制开发,公司网站建设,企业网站建设,品牌网站设计,成都全网营销,成都外贸网站建设,临洮网站建设费用合理。

在使用bootstrap框架布局前，一定要先引入相关的jQuery，CSS，JS文件，不清楚的小伙伴可以看看我以前写文章，如何在HTML页面中使用bootstrap框架，或者参考Bootstrap教程。

bootstrap实现自动轮播图的代码如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>  
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="myCarousel" class="carousel slide" style="width: 500px;" data-ride = "carousel" data-interval="1000">
   <!-- 轮播（Carousel）指标 -->
   <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner" >
    <div class="item active">
     <img src="img/aaa1.jpg" alt="First slide">
    </div>
    <div class="item">
     <img src="img/aaa2.jpg" alt="Second slide">
    </div>
    <div class="item">
     <img src="img/aaa3.jpg" alt="Third slide">
    </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    
   </a>
   <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    
   </a>
  </div> 
 </body>
</html>

<ol> 标签的作用：在轮播图中显示多个圆圈，提示一共有几张图片，以及当前是第几张图片。

<a>标签的作用：可以用鼠标点击图片的左边，查看前一张图片，点击图片的右边查看后一张图片。

在最外层的div中加 data-ride = "carousel" data-interval="1000"，可以实现图片自动轮播的效果，data-interval可以设置轮播的速度，实例用的1000毫秒，一秒等于一千毫秒。

大家可以根据自己的需要修改轮播图的样式，比如图片切换速度等。

效果如图所示：

bootstrap框架如何实现自动轮播图