指引网

当前位置: 主页 > 网页制作 > WEB开发 >

bootstrap如何实现图片自动轮播?bootstrap实现图片自动轮播的实例代码

来源:网络 作者:佚名 点击: 时间:2017-07-19 00:37
[摘要] bootstrap图片自动轮播效果图: 代码实现: !DOCTYPE html htmllang=zh-CN head linkrel=stylesheethref=bootstrap.min.css/ linkrel=stylesheethref=bootstrap-theme.min.css/ scriptsrc=jquery.min.js/script scriptsrc=bootstrap.min.js/script style

bootstrap图片自动轮播效果图:

代码实现:

<!DOCTYPE html>
<htmllang="zh-CN">
<head>
 <linkrel="stylesheet"href="bootstrap.min.css"/>
 <linkrel="stylesheet"href="bootstrap-theme.min.css"/>
 <scriptsrc="jquery.min.js"></script>
 <scriptsrc="bootstrap.min.js"></script>
 <style>
 #div1 {width:600px; height:500px}
 </style>
</head>
<body>
 <divid="div1">
 <divid="carousel-example-generic"class="carousel slide"data-ride="carousel">
  <!-- Indicators -->
  <olclass="carousel-indicators">
  <lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li>
  <lidata-target="#carousel-example-generic"data-slide-to="1"></li>
  <lidata-target="#carousel-example-generic"data-slide-to="2"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <divclass="carousel-inner"role="listbox">
  <divclass="item active">
   <imgsrc="airplane1.jpg">
  </div>
  <divclass="item">
   <imgsrc="airplane2.jpg">
  </div>
  <divclass="item">
   <imgsrc="airplane3.jpg">
  </div>
  </div>
 
  <!-- Controls -->
  <aclass="left carousel-control"href="#carousel-example-generic"role="button"data-slide="prev">
  <spanclass="glyphicon glyphicon-chevron-left"id="aaron1"></span>
  <spanclass="sr-only">Previous</span>
  </a>
  <aclass="right carousel-control"href="#carousel-example-generic"role="button"data-slide="next">
  <spanclass="glyphicon glyphicon-chevron-right"id="aaron2"></span>
  <spanclass="sr-only">Next</span>
  </a>
 </div>
 </div>
</body>
<html>

以上代码可以实现 div1 中的图片自动轮播,轮播时间默认5000ms。

------分隔线----------------------------