使用bootstrap实现图片轮播效果

发表于 | 分类于 | 评论数： | 阅读次数：

什么是bootstrap？

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。使用bootstrap的缺点是设计出来的网页给人一种钦定的感觉。。。

使用bootstrap实现轮播效果

  • 由于bootstrap中有HTML5特性，所以要添加 <!DOCTYPE html>属性；

    基本轮播

    代码如下： 
    <!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
width:100%;
   }
  div#carousel-example-generic{
width:80%;
margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
 <img src="http://onep1caa3.bkt.clouddn.com/1.jpg" >
</div>
<div class="item">
<img src="http://onep1caa3.bkt.clouddn.com/2.jpg" >
</div>
<div class="item">
<img src="http://onep1caa3.bkt.clouddn.com/3.jpg" >
</div>      
<div class="item">
<img src="http://onep1caa3.bkt.clouddn.com/4.jpg" >
</div>
</div>
</div>

带标题轮播

代码如下： 

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
width:100%;
   }
  div#carousel-example-generic{
width:80%;
margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://onep1caa3.bkt.clouddn.com/1.jpg" >
<div class="carousel-caption">
scene 1
</div>
</div>
<div class="item">
<img src="http://onep1caa3.bkt.clouddn.com/2.jpg" >
<div class="carousel-caption">
scene 2
</div>
</div>
<div class="item">
<img src="http://onep1caa3.bkt.clouddn.com/3.jpg" >
<div class="carousel-caption">
scene 3
</div>
</div>

<div class="item">
<img src="http://onep1caa3.bkt.clouddn.com/4.jpg" >
<div class="carousel-caption">
scene 4
</div>
</div>      
</div>
</div>

设置轮播速度

代码如下： 

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
width:100%;
   }
  div#carousel-example-generic{
width:80%;
margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
  <!-- Indicators -->
  <ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
<div class="item active">
  <img src="http://onep1caa3.bkt.clouddn.com/1.jpg" >
</div>
<div class="item">
<img src="http://onep1caa3.bkt.clouddn.com/2.jpg" >
</div>
<div class="item">
<img src="http://onep1caa3.bkt.clouddn.com/3.jpg" >
</div>

<div class="item">
<img src="http://onep1caa3.bkt.clouddn.com/4.jpg" >
</div>

  </div>
</div>

控制前后的轮播

代码如下： 

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" 
rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></
script>
<style>
  div.item img{
width:100%;
   }
  div#carousel-example-generic{
width:80%;
margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-
ride="carousel" data-interval="1000">
  <!-- Indicators -->
  <ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" 
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://onep1caa3.bkt.clouddn.com/1.jpg" >
</div>
<div class="item">
<img src="http://onep1caa3.bkt.clouddn.com/2.jpg" >
</div>
<div class="item">
<img src="http://onep1caa3.bkt.clouddn.com/3.jpg" >
</div>

<div class="item">
<img src="http://onep1caa3.bkt.clouddn.com/4.jpg" >
</div>

  </div>
</div> 
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 
role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

</a>
<a class="right carousel-control" href="#carousel-example-generic" 
role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>  
</a>
</div>
thank u !