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>
  • 相关阅读:
    Hdu 5396 Expression (区间Dp)
    Lightoj 1174
    codeforces 570 D. Tree Requests (dfs)
    codeforces 570 E. Pig and Palindromes (DP)
    Hdu 5385 The path
    Hdu 5384 Danganronpa (AC自动机模板)
    Hdu 5372 Segment Game (树状数组)
    Hdu 5379 Mahjong tree (dfs + 组合数)
    Hdu 5371 Hotaru's problem (manacher+枚举)
    Face The Right Way---hdu3276（开关问题）
  • 原文地址：https://www.cnblogs.com/grj001/p/12224448.html
Copyright © 2011-2022 走看看