zoukankan      html  css  js  c++  java

  • Bootstrap 插件轮播

    Bootstrap 插件-轮播

    2018年01月22日 00:25:32 litengbin 阅读数 888

    1 : 基本轮播    
    2 : 带标题的轮播    
    3 : 设置轮播速度    
    4 : 控制前后的轮播    

    • 基本轮播

      
 

      1. <!DOCTYPE html>

      2. <script src="js/jquery/2.0.0/jquery.min.js"></script>

      3. <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

      4. <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

      5. <style>

      6. div.item img{

      7. 100%;

      8. }

      9. div#carousel-example-generic{

      10. 80%;

      11. margin:0 auto;

      12. }

      13. </style>

      14. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

      15. <!-- Indicators -->

      16. <ol class="carousel-indicators">

      17. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

      18. <li data-target="#carousel-example-generic" data-slide-to="1"></li>

      19. <li data-target="#carousel-example-generic" data-slide-to="2"></li>

      20. <li data-target="#carousel-example-generic" data-slide-to="3"></li>

      21. </ol>

      22.  

      23. <!-- Wrapper for slides -->

      24. <div class="carousel-inner" role="listbox">

      25. <div class="item active">

      26. <img src="3491.png" >

      27. </div>

      28. <div class="item">

      29. <img src="3492.png" >

      30. </div>

      31. <div class="item">

      32. <img src="3493.png" >

      33. </div>

      34.  

      35. <div class="item">

      36. <img src="3494.png" >

      37. </div>

      38.  

      39. </div>

      40. </div>

    • 带标题的轮播
      
 

      1. <!DOCTYPE html>

      2. <script src="js/jquery/2.0.0/jquery.min.js"></script>

      3. <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

      4. <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

      5. <style>

      6. div.item img{

      7. 100%;

      8. }

      9. div#carousel-example-generic{

      10. 80%;

      11. margin:0 auto;

      12. }

      13. </style>

      14. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

      15. <!-- Indicators -->

      16. <ol class="carousel-indicators">

      17. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

      18. <li data-target="#carousel-example-generic" data-slide-to="1"></li>

      19. <li data-target="#carousel-example-generic" data-slide-to="2"></li>

      20. <li data-target="#carousel-example-generic" data-slide-to="3"></li>

      21. </ol>

      22.  

      23. <!-- Wrapper for slides -->

      24. <div class="carousel-inner" role="listbox">

      25. <div class="item active">

      26. <img src="3491.png" >

      27. <div class="carousel-caption">

      28. LOL1

      29. </div>

      30. </div>

      31. <div class="item">

      32. <img src="3492.png" >

      33. <div class="carousel-caption">

      34. LOL2

      35. </div>

      36. </div>

      37. <div class="item">

      38. <img src="3493.png" >

      39. <div class="carousel-caption">

      40. LOL3

      41. </div>

      42. </div>

      43.  

      44. <div class="item">

      45. <img src="3494.png" >

      46. <div class="carousel-caption">

      47. LOL4

      48. </div>

      49. </div>

      50.  

      51. </div>

      52.  

      53. </div>

    • 设置轮播速度
        
      
 

      1. <!DOCTYPE html>

      2. <script src="js/jquery/2.0.0/jquery.min.js"></script>

      3. <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

      4. <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

      5. <style>

      6. div.item img{

      7. 100%;

      8. }

      9. div#carousel-example-generic{

      10. 80%;

      11. margin:0 auto;

      12. }

      13. </style>

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

      15. <!-- Indicators -->

      16. <ol class="carousel-indicators">

      17. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

      18. <li data-target="#carousel-example-generic" data-slide-to="1"></li>

      19. <li data-target="#carousel-example-generic" data-slide-to="2"></li>

      20. <li data-target="#carousel-example-generic" data-slide-to="3"></li>

      21. </ol>

      22.  

      23. <!-- Wrapper for slides -->

      24. <div class="carousel-inner" role="listbox">

      25. <div class="item active">

      26. <img src="3491.png" >

      27. </div>

      28. <div class="item">

      29. <img src="3492.png" >

      30. </div>

      31. <div class="item">

      32. <img src="3493.png" >

      33. </div>

      34.  

      35. <div class="item">

      36. <img src="3494.png" >

      37. </div>

      38.  

      39. </div>

      40. </div>

    • 控制前后的轮播
      
 

      1. <!DOCTYPE html>

      2. <script src="js/jquery/2.0.0/jquery.min.js"></script>

      3. <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

      4. <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

      5. <style>

      6. div.item img{

      7. 100%;

      8. }

      9. div#carousel-example-generic{

      10. 80%;

      11. margin:0 auto;

      12. }

      13. </style>

      14. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

      15. <!-- Indicators -->

      16. <ol class="carousel-indicators">

      17. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

      18. <li data-target="#carousel-example-generic" data-slide-to="1"></li>

      19. <li data-target="#carousel-example-generic" data-slide-to="2"></li>

      20. <li data-target="#carousel-example-generic" data-slide-to="3"></li>

      21. </ol>

      22.  

      23. <!-- Wrapper for slides -->

      24. <div class="carousel-inner" role="listbox">

      25. <div class="item active">

      26. <img src="3491.png" >

      27. </div>

      28. <div class="item">

      29. <img src="3492.png" >

      30. </div>

      31. <div class="item">

      32. <img src="3493.png" >

      33. </div>

      34.  

      35. <div class="item">

      36. <img src="3494.png" >

      37. </div>

      38.  

      39. </div>

      40.  

      41. <!-- Controls -->

      42. <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

      43. <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

      44.  

      45. </a>

      46. <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

      47. <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

      48.  

      49. </a>

      50.  

      51. </div>
  • 相关阅读:
    算法导论 第二部分——排序和顺序统计量
    算法导论——第一部分——基础知识
    liunx中的进程与线程
    vector中pair的排序方法
    sql 入门经典（第五版） Ryan Stephens 学习笔记 第五部分： 性能调整
    sql 入门经典（第五版） Ryan Stephens 学习笔记 　第四部分：建立复杂的数据库查询/
    Object C学习笔记1-基本数据类型说明
    Objective-C(生命周期)
    从 React 的组件更新谈 Immutable 的应用
    React性能优化总结（转）
  • 原文地址：https://www.cnblogs.com/grj001/p/12224448.html
Copyright © 2011-2022 走看看