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>
相关阅读:
react 安装脚手架过程
 微信小程序-分享功能
 echarts 实现多图联动显示tooltip
dom 相同父节点查找
 js 给你一个 32 位的有符号整数 x ，返回将 x 中的数字部分反转后的结果
 vue手写el-form组件
 vue组件传值、通信
 vue项目打包桌面应用 exe程序以及打包为安装程序exe
vue 使用echarts来制作图表
 前端数据可视化插件-图表
原文地址：https://www.cnblogs.com/grj001/p/12224448.html

Bootstrap 插件轮播

Bootstrap 插件-轮播