zoukankan      html  css  js  c++  java
  • bootstrap轮播

    <!-- bootstrap 轮播 -->
    <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>
      </ol>
    <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="./images/change/banner.jpg" alt="...">
          <div class="carousel-caption">...</div>
        </div>
        <div class="item">
          <img src="./images/change/banner.jpg" alt="...">
          <div class="carousel-caption">...</div>
        </div>
        <div class="item">
          <img src="./images/change/banner.jpg" alt="...">
          <div class="carousel-caption">...</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>
        <span class="sr-only">Previous</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>
        <span class="sr-only">Next</span>
      </a>
    </div>

    其中ol是导航小圆点,item类为每个图片,其中的capition可以引入标题,control模块为左右箭头
    若想改变转动时间间隔,可以引入以下代码

    $('.carousel').carousel({ interval: 2000 })

  • 相关阅读:
    2.Android之按钮Button和编辑框EditText学习
    《DSP using MATLAB》Problem 3.8
    《DSP using MATLAB》Problem 3.7
    《DSP using MATLAB》Problem 3.6
    《DSP using MATLAB》Problem 3.5
    《DSP using MATLAB》Problem 3.4
    《DSP using MATLAB》Problem 3.3
    《DSP using MATLAB》Problem 3.2
    《DSP using MATLAB》Problem 3.1
    《DSP using MATLAB》Problem 2.20
  • 原文地址:https://www.cnblogs.com/xuwenqin/p/14029332.html
Copyright © 2011-2022 走看看