1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Document</title>
6 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
7 <style type="text/css">
8 .carousel {
9 height: 500px;
10 }
11 .carousel .item {
12 height: 500px;
13 background-color: #000;
14 }
15 .carousel .item img {
16 width: 100%;
17 }
18 .carousel-caption {
19 z-index: 10;
20 }
21 </style>
22 </head>
23 <body>
24 <!-- 轮播 -->
25 <div id="ad-carousel" class="carousel slide" data-ride="carousel">
26 <ol class="carousel-indicators">
27 <li data-slide-to="0" class="active"></li>
28 <li data-slide-to="1"></li>
29 <li data-slide-to="2"></li>
30 </ol>
31 <div class="carousel-inner">
32 <div class="item active">
33 <img src="http://img.glzy8.com/upfiles/www/ppt/jpg/24675.jpg" alt="1 slide">
34 <div class="container">
35 <div class="carousel-caption">
36 文本区域
37 </div>
38 </div>
39 </div>
40 <div class="item">
41 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506331632659&di=959bca79c43af466474ac41fb61fce52&imgtype=0&src=http%3A%2F%2Fimg.1ppt.com%2Fuploads%2Fallimg%2F1305%2F1-130516091446402.jpg" alt="2 slide">
42 <div class="container">
43 <div class="carousel-caption">
44 文本区域
45 </div>
46 </div>
47 </div>
48 <div class="item">
49 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506331632655&di=96be7e96cad8bf956f9650290c569bf8&imgtype=0&src=http%3A%2F%2Fwww.jituwang.com%2Fuploads%2Fallimg%2F110910%2F2444-110910214P238.jpg" alt="3 slide">
50 <div class="container">
51 <div class="carousel-caption">
52 文本区域
53 </div>
54 </div>
55 </div>
56 </div>
57 <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
58 class="glyphicon glyphicon-chevron-left"></span></a>
59 <a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
60 class="glyphicon glyphicon-chevron-right"></span></a>
61 </div>
62 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
63 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
64 </body>
65 </html>
