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>

  • 相关阅读:
    c#中using System.Runtime.Serialization.Json;不能引用
    VS2013 当前不会命中断点还未为文档加载任何符号
    windows2008 设置会话超时时间
    服务没有及时响应启动或控制请求 1053
    IIS装好了无法访问localhost
    Shiro笔记——简介、 架构分析
    Java 连接使用 Redis
    Java 连接操作 Redis 出现错误
    网络方面的常用命令 & 常用端口介绍
    Redis 配置文件及命令详解
  • 原文地址:https://www.cnblogs.com/grj001/p/12224448.html
Copyright © 2011-2022 走看看