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

发布时间：2020-10-20 17:01:51 作者：小新
来源：亿速云阅读：695

这篇文章主要介绍了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框架如何实现自动轮播图

感谢你能够认真阅读完这篇文章，希望小编分享bootstrap框架如何实现自动轮播图内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!

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

相关阅读