test.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <!-- 新 Bootstrap 核心 CSS 文件 -->
  7. <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  8. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  9. <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  10. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  11. <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  12. </head>
  13. <body>
  14. <div class="onepage">
  15. <div class="container" id="myCarousel">
  16. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  17. <!-- Indicators -->
  18. <ol class="carousel-indicators">
  19. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  20. <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  21. <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  22. </ol>
  23. <!-- Wrapper for slides -->
  24. <div class="carousel-inner" role="listbox">
  25. <div class="item active img" >
  26. <img src="img/4.jpg" >
  27. <div class="carousel-caption">
  28. the first
  29. </div>
  30. </div>
  31. <div class="item img">
  32. <img src="img/2.jpg">
  33. <div class="carousel-caption">
  34. syhdfh
  35. </div>
  36. </div>
  37. <div class="item img">
  38. <img src="img/3.jpg" >
  39. <div class="carousel-caption">
  40. syhdfh
  41. </div>
  42. </div>
  43. </div>
  44. <!-- Controls -->
  45. <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  46. <span class="glyphicon glyphicon-chevron-left"></span>
  47. <span class="sr-only">Previous</span>
  48. </a>
  49. <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  50. <span class="glyphicon glyphicon-chevron-right"></span>
  51. <span class="sr-only">Next</span>
  52. </a>
  53. </div>
  54. </div>
  55. </div>
  56. </body>
  57. </html>