BootStrap 轮播广告效果 

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <title></title>
 8     <link rel="icon" href="img/favicon.ico"/>
 9     <link rel="stylesheet" href="css/bootstrap.css">
10     <!--[if lt IE 9]>
11     <script src="js/html5shiv.min.js"></script>
12     <script src="js/respond.min.js"></script>
13     <![endif]-->
14     <style>
15         /*轮播中的广告图片撑满一整行*/
16         .carousel-inner .item img{
17             width:100%;
18         }
19     </style>
20 </head>
21 <body>
22 <div class="container">
23     <h1>轮播广告示例</h1>
24     <div id="ad" class="carousel slide" data-ride="carousel" data-interval="3000">
25         <!-- 按钮图标 -->
26         <ol class="carousel-indicators">
27             <li data-target="#ad" data-slide-to="0" class="active"></li>
28             <li data-target="#ad" data-slide-to="1"></li>
29             <li data-target="#ad" data-slide-to="2"></li>
30             <li data-target="#ad" data-slide-to="3"></li>
31         </ol>
32         <!-- Wrapper for slides -->
33         <div class="carousel-inner" role="listbox">
34             <div class="item active">
35                 <img src="img/11.jpg">
36                 <div class="carousel-caption">
37                     <h5>大红花</h5>
38                     <p>Lorem ipsum dolor sit amet, consectetur .</p>
39                 </div>
40             </div>
41             <div class="item">
42                 <img src="img/22.jpg">
43                 <div class="carousel-caption">
44                     <h5>大沙漠</h5>
45                     <p>Lorem ipsum dolor sit amet, consectetur .</p>
46                 </div>
47             </div>
48             <div class="item">
49                 <img src="img/33.jpg">
50                 <div class="carousel-caption">
51                     <h5>大荷花</h5>
52                     <p>Lorem ipsum dolor sit amet, consectetur .</p>
53                 </div>
54             </div>
55             <div class="item">
56                 <img src="img/44.jpg">
57                 <div class="carousel-caption">
58                     <h5>大灯塔</h5>
59                     <p>Lorem ipsum dolor sit amet, consectetur .</p>
60                 </div>
61             </div>
62         </div>
63         <!--轮播控件-->
64         <a class="left carousel-control" href="#ad" role="button" data-slide="prev">
65             <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
66             <span class="sr-only">Previous</span>
67         </a>
68         <a class="right carousel-control" href="#ad" role="button" data-slide="next">
69             <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
70             <span class="sr-only">Next</span>
71         </a>
72     </div>
73 </div>
74 <script src="js/jquery-1.11.3.js"></script>
75 <script src="js/bootstrap.js"></script>
76 </body>
77 </html>

效果图如下：

posted @ 2016-12-23 15:39  时间脱臼  阅读(155)  评论(0)    收藏  举报