bootstrap轮播

傷城~ 2022-10-02 10:50 303阅读 0赞
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap</title>
  6. <style type="text/css">
  7. div.d1{
  8. padding-top:70px;
  9. }
  10. div.item img{
  11. width:100%;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <script src="jquery.min.js"></script>
  17. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
  18. <script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
  19. <div class="d1" style="width:800px;margin:10px">
  20. <div id="carousel-example-generic" class="carousel slide" data-ride='carousel' data-interval="2000">
  21. <!--indicators-->
  22. <ol class="carousel-indicators">
  23. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  24. <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  25. <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  26. <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  27. </ol>
  28. <!--wrapper for slides-->
  29. <div class="carousel-inner" role="listbox">
  30. <div class="item active">
  31. <img src="gareen.png">
  32. <div class="carousel-caption">
  33. lol1
  34. </div>
  35. </div>
  36. <div class="item">
  37. <img src="temo.png">
  38. <div class="carousel-caption">
  39. lol1
  40. </div>
  41. </div>
  42. <div class="item">
  43. <img src="nv.png">
  44. <div class="carousel-caption">
  45. lol1
  46. </div>
  47. </div>
  48. <div class="item">
  49. <img src="gareen.png">
  50. <div class="carousel-caption">
  51. lol1
  52. </div>
  53. </div>
  54. </div>
  55. <!--controls-->
  56. <a href="#carousel-example-generic" class="left carousel-control" role="button" data-slide="prev">
  57. <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  58. </a>
  59. <a href="#carousel-example-generic" class="right carousel-control" role="button" data-slide="next">
  60. <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  61. </a>
  62. </div>
  63. </div>
  64. </body>
  65. </html>

在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,303人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Bootstrap

    Bootstrap轮播图组件分三部分: (1)图片部分:用于展示内容的图片。 (2)计数器:用于计算当前切换的图片索引。 (3)控制器:控制图片的显示对象。 第一