zoukankan      html  css  js  c++  java
  • bootstrap carousel实现

    bootstrap carousel实现
    问题:轮播效果不出现
    解决方法: 在在最外层div中添加此属性 data-ride="carousel"
    用js方法实现轮播 $(function () { $('#myCarousel').carousel({ interval: 2000 }); })


    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
      .carousel-inner > .item > img,
      .carousel-inner > .item > a > img {
          width: 100%;
          margin: auto;
      }
      .carousel{
        overflow: hidden;
        position: relative;
        top: 80px;
      }
      .carousel-indicators{
        display: none;
      }
      .carousel-control{
         position: absolute;
         -webkit-tap-highlight-color: rgba(0,0,2,0);
         top: 50%;
         left: 0px;
         opacity: 0.8;
         z-index: 3;
         text-indent: -9999px;
         overflow: hidden;
         text-decoration: none;
         height: 50px;
         width: 90px;
         margin-top: 150px;
         -webkit-transition: all 1s;
         -moz-transition: all 1s;
         -ms-transition: all 1s;
         -o-transition: all 1s;
         transition: all 1s;
    
       }
      .carousel-control.right{
        right: 0px;
        background: transparent url(image/right.png) no-repeat right top;
    
      }
      .carousel-control.left{
        left: 0px;
        background: transparent url(image/left.png) no-repeat left top;
      }
      .carousel-control.left:hover{
        left: 50px;
        background: transparent url(image/left.png) no-repeat left top;
    
      }
      .carousel-control.right:hover{
        right: 50px;
        display: inline-block;
        background: transparent url(image/right.png) no-repeat right top;
    
      }
    
     </style>
      <script src="jquery-3.2.1.min.js"></script>
      <script src="bootstrap.min.js"></script>
      <link rel="stylesheet" href="bootstrap.min.css">
    </head>
    <body>
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <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>
          <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
    
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
    
          <div class="item active">
            <img src="image/banner01.jpg" height="426" width="1920"/>
    
          </div>
    
          <div class="item">
            <img src="image/banner02.jpg" height="426" width="1920"/>
    
          </div>
    
          <div class="item">
            <img src="image/banner03.jpg" height="426" width="1920"/>
          </div>
    
        </div>
    
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    
    
    </body>
    </html>



  • 相关阅读:
    1461. Check If a String Contains All Binary Codes of Size K
    1460. Make Two Arrays Equal by Reversing Sub-arrays
    1466. Reorder Routes to Make All Paths Lead to the City Zero
    1464. Maximum Product of Two Elements in an Array
    js 获取select的值 / js动态给select赋值【转】
    js在HTML中的三种写法【转】
    php中 elseif和else if 的区别【转】
    PhpStorm 常用快捷键
    PhpStorm 2018最新汉化包 解决”设置”不可用问题【转】
    PHP json_encode里面经常用到的 JSON_UNESCAPED_UNICODE和JSON_UNESCAPED_SLASHES【转】
  • 原文地址:https://www.cnblogs.com/html-css-js/p/7388336.html
Copyright © 2011-2022 走看看