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. width:100%;
8. }
9. div#carousel-example-generic{
10. width: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. width:100%;
8. }
9. div#carousel-example-generic{
10. width: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. width:100%;
8. }
9. div#carousel-example-generic{
10. width: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. width:100%;
8. }
9. div#carousel-example-generic{
10. width: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>

posted @ 2019-08-08 18:46 grj001 阅读(81) 评论(0) 收藏举报

刷新页面返回顶部

grj001

Bootstrap 插件-轮播

Bootstrap 插件-轮播

公告