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>
  • 相关阅读:
    [洛谷P2523] HAOI2011 Problem c
    [CF156D] Clues
    [洛谷P4769] NOI2018 冒泡排序
    [CF605E] Intergalaxy Trips
    [洛谷P4492] HAOI2018 苹果树
    [洛谷P3349] ZJOI2016 小星星
    [洛谷P4336] SHOI2016 黑暗前的幻想乡
    [洛谷P5364] SNOI2017 礼物
    [洛谷P2606] ZJOI2010 排列计数
    [洛谷P6078] CEOI2004 candy
  • 原文地址：https://www.cnblogs.com/grj001/p/12224448.html
Copyright © 2011-2022 走看看