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>
相关阅读:
浅谈页面的瀑布流布局
 前端常用动画库
 JavaScript七宗罪和一些槽点
 prototype与 _proto__的关系
 Javascript之傻傻理不清的原型链、prototype、__proto__
C#开发微信门户及应用(26)-公众号微信素材管理
 C#开发微信门户及应用(25)-微信企业号的客户端管理功能
 基于InstallShield2013LimitedEdition的安装包制作
 Entity Framework 实体框架的形成之旅--Code First模式中使用 Fluent API 配置（6）
Entity Framework 实体框架的形成之旅--Code First的框架设计（5）
原文地址：https://www.cnblogs.com/grj001/p/12224448.html

Bootstrap 插件轮播

Bootstrap 插件-轮播