• Bootstrap 轮播图(Carousel)插件


    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>demo</title>
      <link rel="icon" type="image/x-icon" href="../img/favicon.ico"/>
      <script type="text/javascript" src="../js/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="../plus/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
      <script type="text/javascript" src="../plus/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    
      <style>
        #myCarousel{
          width: 790px;
          margin: auto;
        }
      </style>
    </head>
    <body>
        
    
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- 轮播(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" role="listbox">
        <div class="item active">
          <img src="../img/b1.jpg" alt="First slide">
        </div>
        <div class="item">
          <img src="../img/b2.jpg" alt="Second slide">
        </div>
        <div class="item">
          <img src="../img/b3.jpg" 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> 
    
    </body>
    </html>
  • 相关阅读:
    LeetCode OJ
    LeetCode OJ
    LeetCode OJ
    linux tips
    vim more
    vim basic
    cut
    paste
    uniq
    Linux的用户
  • 原文地址:https://www.cnblogs.com/thankyouGod/p/6367112.html
Copyright © 2020-2023  润新知