Bootstrap 插件轮播

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. 
  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>
  23. 
  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>
  35. <div class="item">
  36. <img src="3494.png" >
  37. </div>
  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. 
  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>
  23. 
  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>
  44. <div class="item">
  45. <img src="3494.png" >
  46. <div class="carousel-caption">
  47. LOL4
  48. </div>
  49. </div>
  51. </div>
  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. 
  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>
  23. 
  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>
  35. <div class="item">
  36. <img src="3494.png" >
  37. </div>
  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. 
  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>
  23. 
  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>
  35. <div class="item">
  36. <img src="3494.png" >
  37. </div>
  39. </div>
  41. 
  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>
  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>
  49. </a>
  51. </div>
相关阅读:
14. Longest Common Prefix[E]最长公共前缀
 13. Roman to Integer[E]罗马数字转整数
 12. Integer to Roman[M]整数转罗马数字
 11. Container With Most Water[M]盛最多水的容器
 10. Regular Expression Matching[H]正则表达式匹配
 清除浮動，父類塌陷解決
 html 定位
 微信支付这个坑，终于过了
 浮动
 盒子模型高级应用
原文地址：https://www.cnblogs.com/grj001/p/12224447.html

Bootstrap 插件轮播

Bootstrap 插件-轮播