zoukankan      html  css  js  c++  java
  • 基于bootstrap的图片轮播功能

    插入js及css支持:

    <link rel="stylesheet" href="css/bootstrap.min.css"/>    
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    HTML代码:

     <div id="pictures" class="item">
               <div id="myCarousel" class="carousel slide">
                   <!-- 轮播(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="images/gf.jpg" class="img-responsive" alt="First slide">
                      </div>
                      <div class="item">
                         <img src="images/psb.jpg" class="img-responsive" alt="Second slide">
                      </div>
                      <div class="item">
                         <img src="images/uyt.jpg" class="img-responsive" alt="Third slide">
                      </div>
                   </div>
                   <!-- 轮播(Carousel)导航 -->
                   <a class="carousel-control left" href="#myCarousel" 
                      data-slide="prev">&lsaquo;</a>
                   <a class="carousel-control right" href="#myCarousel" 
                      data-slide="next">&rsaquo;</a>
                </div> 
                    
            </div>
  • 相关阅读:
    OCA读书笔记(11)
    shell命令--rev
    OCA读书笔记(10)
    shell命令--cut
    OCA读书笔记(9)
    shell命令--tail
    天气的研究
    网络知识汇总(2)
    shell命令--head
    OCM读书笔记(2)
  • 原文地址:https://www.cnblogs.com/sdgf/p/4772670.html
Copyright © 2011-2022 走看看