Bootstrap外掛（八）——輪播（Carousel.js）
阿新 • • 發佈：2019-01-27
這一篇我們來學習一下bootstrap的輪播外掛Carousel.js,我相信大家對於輪播已經熟悉的不能再熟悉了，基本上我們任意開啟一個網站都會有輪播的元素。在以前需要我們通過js css html自己寫，但是對於初學者來說還是比較難得人一件事，但是bootstrap為我們封裝好了一個外掛，只要簡單的classl配置就能簡單的實現輪播。OK接下來依然是先來看看我們的示例效果：
來看看，你是哪個口味，(
) 哈哈哈......
接下來是程式碼，註釋都在程式碼裡面，邊敲邊看就可以了。
1
來看看，你是哪個口味，(
) 哈哈哈......
接下來是程式碼，註釋都在程式碼裡面，邊敲邊看就可以了。
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"
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
<
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-