bootstrap 轮播模板 

 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>

 

posted @ 2017-09-25 14:51  静静的fire  阅读(338)  评论(0)    收藏  举报