bootstrap轮播图实现

2018-08-29阅读 3020

bootstrap可以实现多种轮播样式

1.先来看一下完整的轮播（自动轮播，左右翻页，小圆点切换）

<!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://how2j.cn/img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png" >
    </div>
 
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png" >
    </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>

2.轮播速度设置在整个轮播设置data-interval=“1000”设置轮播速度，1000=1m，单位是毫秒

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">

轮播自动播放速度设为1s轮播一次

3.左右翻页的控制

 <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>

去掉这两个超链接则没有左右翻页功能

4.轮播标题内容(banner图里面的文本标题等)

<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://how2j.cn/img/site/step/3491.png" >
      <div class="carousel-caption">
        轮播标题
      </div>
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png" >
             <div class="carousel-caption">
        轮播标题
      </div>
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png" >
             <div class="carousel-caption">
        轮播标题
      </div>
    </div>
 
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png" >
             <div class="carousel-caption">
        轮播标题
      </div>
    </div>
 
  </div>

在轮播的item的子项中新增class为carousel-caption则会出现在banner图内的文本（注：这个类放在轮播图的下面）

5.基础轮播实现

<!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://how2j.cn/img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png" >
    </div>
 
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png" >
    </div>
 
  </div>
</div>

可以根据所需要的轮播样式自动去添加!

本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。

posted on 2020-03-16 19:26 曹明阅读(188) 评论(0) 编辑收藏举报