轮播图插件

轮播图小插件代码。简单，实用。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"> 
 5     <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
 6     <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
 7     <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 8     <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 9 </head>
10 <body>
11 
12 <div id="myCarousel" class="carousel slide">
13     <!-- 轮播（Carousel）指标 -->
14     <ol class="carousel-indicators">
15         <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
16         <li data-target="#myCarousel" data-slide-to="1"></li>
17         <li data-target="#myCarousel" data-slide-to="2"></li>
18     </ol>   
19     <!-- 轮播（Carousel）项目 -->
20     <div class="carousel-inner">
21         <div class="item active">
22             <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
23         </div>
24         <div class="item">
25             <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
26         </div>
27         <div class="item">
28             <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
29         </div>
30     </div>
31     <!-- 轮播（Carousel）导航 -->
32     <a class="carousel-control left" href="#myCarousel" 
33        data-slide="prev">&lsaquo;</a>
34     <a class="carousel-control right" href="#myCarousel" 
35        data-slide="next">&rsaquo;</a>
36 </div> 
37 
38 </body>
39 </html>

效果图如下：

 

引用来源：http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-carousal-simple

posted @ 2016-12-30 13:37  万里冰封  阅读(250)  评论(0)  编辑  收藏  举报