版权声明：欢迎分享，但请注明出处，谢谢 https://blog.csdn.net/qq_28057577/article/details/78107348
这一篇我们来学习一下bootstrap的轮播插件Carousel.js,我相信大家对于轮播已经熟悉的不能再熟悉了，基本上我们任意打开一个网站都会有轮播的元素。在以前需要我们通过js css html自己写，但是对于初学者来说还是比较难得人一件事，但是bootstrap为我们封装好了一个插件，只要简单的classl配置就能简单的实现轮播。OK接下来依然是先来看看我们的示例效果：
来看看，你是哪个口味，(
) 哈哈哈......
) 哈哈哈......
接下来是代码，注释都在代码里面，边敲边看就可以了。
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
<meta charset="UTF-8">
5
<title>组件</title>
6
<!--引入bootstrap样式文件-->
7
<link href="css/bootstrap.min.css" rel="stylesheet">
8
<!--引入jq（必须在bootstrap.min.js文件之前）-->
9
<script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
<!--引入bootstrap js-->
11
<script type="application/javascript" src="js/bootstrap.min.js"></script>
12
<script>
13
$(function(){
14
$('.carousel').carousel({
15
interval: 2000
16
})
17
})
18
19
</script>
20
</head>
21
<body style="margin: 20px">
22
23
<div style="width: 801px;float: left" id="carousel-demo" class="carousel slide" data-ride="carousel">
24
25
<ol class="carousel-indicators">
26
27
<li data-target="#carousel-demo" data-slide-to="0" class="active"></li>
28
<li data-target="#carousel-demo" data-slide-to="1"></li>
29
<li data-target="#carousel-demo" data-slide-to="2"></li>
30
</ol>
31
32
<div class="carousel-inner" role="listbox">
33
<div class="item active">
34
<img src="img/banner02.jpg" >
35
</div>
36
<div class="item">
37
<img src="img/banner03.jpg" >
38
</div>
39
<div class="item">
40
<img src="img/banner04.jpg" >
41
</div>
42
</div>
43
44
<a class="left carousel-control" href="#carousel-demo" role="button" data-slide="prev">
45
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
46
<span class="sr-only">Previous</span>
47
</a>
48
49
<a class="right carousel-control" href="#carousel-demo" role="button" data-slide="next">
50
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
51
<span class="sr-only">Next</span>
52
</a>
53
</div>
54
55
<!--带标题描述
56
1.carousel-indicators表示指示小圆点 还需要data-target="#carousel-demo1"绑定轮播div
57
2。class="carousel-inner" role="listbox"设置包含每个item的主div
58
3.class="item"标识每一个轮播项
59
4.class="carousel-caption"标识每个item的标题和概述
60
5.class="left carousel-control" href="#carousel-demo1" role="button" data-slide="prev"设置左箭头 right设置右箭头
61
6.class="glyphicon glyphicon-chevron-left"设置左箭头的图标
62
-->
63
<div style="width: 801px;float: right" id="carousel-demo1" class="carousel slide" data-ride="carousel">
64
65
66
<ol class="carousel-indicators">
67
68
<li data-target="#carousel-demo1" data-slide-to="0" class="active"></li>
69
<li data-target="#carousel-demo1" data-slide-to="1"></li>
70
<li data-target="#carousel-demo1" data-slide-to="2"></li>
71
</ol>
72
73
<div class="carousel-inner" role="listbox">
74
<div class="item active">
75
<img src="img/banner02.jpg" >
76
<div class="carousel-caption">
77
<h3>采花的村姑</h3>
78
<p>采花的村姑美不美美不美，原来你是这种口味</p>
79
</div>
80
</div>
81
<div class="item">
82
<img src="img/banner03.jpg" >
83
<div class="carousel-caption">
84
<h3>森林里的春色</h3>
85
<p>哇，小姐姐，小姐姐你的低胸低的有可怕，好怕怕，要流鼻血。</p>
86
</div>
87
</div>
88
<div class="item">
89
<img src="img/banner04.jpg" >
90
<div class="carousel-caption">
91
<h3>萌萌哒的妹子</h3>
92
<p>搜不鸟，最喜欢这种调调了，心都快化了</p>
93
</div>
94
</div>
95
</div>
96
97
<a class="left carousel-control" href="#carousel-demo1" role="button" data-slide="prev">
98
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
99
<span class="sr-only">Previous</span>
100
</a>
101
102
<a class="right carousel-control" href="#carousel-demo1" role="button" data-slide="next">
103
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
104
<span class="sr-only">Next</span>
105
</a>
106
</div>
107
</body>
108
</html>