Bootstrap 轮播图的使用和理解
1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Bootstrap 轮播图</title>
8 <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
9 <!--[if lt IE 9]>
10 <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
11 <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
12 <![endif]-->
13
14 <style>
15 img {
16 width: 100%;
17 height: 100%;
18 }
19 p {
20 text-align: center;
21 }
22 </style>
23 </head>
24 <body>
25 <!-- 轮播图部分 -->
26 <div class="carousel slide" data-ride="carousel">
27 <!-- Indicators -->
28 <!-- 指示器 -->
29 <ol class="carousel-indicators">
30 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
31 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
32 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
33 </ol>
34
35 <!-- Wrapper for slides -->
36 <!-- 包裹幻灯片 -->
37 <div class="carousel-inner" role="listbox">
38 <div class="item active">
39 <img src="images/轮播1.png" alt="轮播图1">
40 <div class="carousel-caption">
41 轮播图1
42 </div>
43 </div>
44 <div class="item">
45 <img src="images/轮播2.png" alt="轮播图2">
46 <div class="carousel-caption">
47 轮播图2
48 </div>
49 </div>
50 <div class="item">
51 <img src="images/轮播3.png" alt="轮播图3">
52 <div class="carousel-caption">
53 轮播图3
54 </div>
55 </div>
56 <p>轮播图尝试</p>
57 </div>
58
59 <!-- Controls -->
60 <!-- 控制 -->
61 <!-- 向左滑动 -->
62 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
63 <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
64 <span class="sr-only">Previous</span>
65 </a>
66 <!-- 向右滑动 -->
67 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
68 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
69 <span class="sr-only">Next</span>
70 </a>
71 </div>
72
73 <!-- js控制轮播图 -->
74 <button >向前</button>
75 <button >向后</button>
76 <button >停止</button>
77 <button >开始</button>
78 <button >到第二张</button>
79
80 <script src="lib/jquery/jquery.js"></script>
81 <script src="lib/bootstrap/js/bootstrap.js"></script>
82 <!-- 轮播图还支持js控制 -->
83 <script>
84 $(function(){
85 $('.carousel').carousel({
86 interval: 2000,//轮播间隔
87 pause:"hover", //鼠标悬停在轮播图上，是否停止滚动
88 wrap:true, //
89 keyboard:true //响应键盘事件
90 });
91
92 $("#prev").click(function(event) {
93 $('.carousel').carousel('prev')// 周期上一个项目。
94 });
95
96 $("#next").click(function(event) {
97 $('.carousel').carousel('next')// 周期到下一个项目。
98 });;
99
100 $("#pause").click(function(event) {
101 $('.carousel').carousel('pause')// 从通过项目循环停止传送带。
102 });;
103
104 $("#start").click(function(event) {
105 $('.carousel').carousel('cycle')// 通过传送带项目周期从左到右。
106 });;
107
108 $("#jump").click(function(event) {
109 $('.carousel').carousel(1)// 循环传送带到一个特定的帧（0为主，类似于数组）。
110 });;
111
112
113
114 });
115 </script>
116 </body>
117 </html>注意引入.css和.js 文件查看效果（里面有三张图片，随便找几张代替便可）
