基于BootStrap的轮播图

最新推荐文章于 2024-01-15 19:39:34 发布

George_Fal

最新推荐文章于 2024-01-15 19:39:34 发布

阅读量160

点赞数

原文链接：http://www.cnblogs.com/ynhwl/p/9576493.html

版权

准备

先设计一个承载轮播图的区域：四周向外阴影、扁平圆角：

1 #myShuffArea{
2                 width: 50%;
3                 height: 300px;
4                 border: solid 1px gainsboro;
5                 border-radius:5%;
6                 /*x:0,y:0就是四周*/
7                 box-shadow: 0px 0px 10px 5px lightgrey;
8             }

向该区域内放入轮播内容：

 1 <body>
 2         <div class="container">
 3             <!--自己定义的收容轮播的区域-->
 4             <div id="myShuffArea">
 5                 <div id="myCarousel" class="carousel slide" data-ride="carousel">
 6                     <!--轮播指标-->
 7                     <ol class="carousel-indicators">
 8                         <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 9                         <li data-target="#myCarousel" data-slide-to="1" ></li>
10                         <li data-target="#myCarousel" data-slide-to="2" ></li>
11                     </ol>
12                     <!--轮播项目-->
13                     <div class="carousel-inner">
14                         <div class="item active">
15                             <img src="../img/feichang/bbbg.jpg" alt="图1"/>
16                         </div>
17                         <div class="item">
18                             <img src="../img/login/bg.jpg" alt="图2"/>
19                         </div>
20                         <div class="item">
21                             <img src="../img/login/touxiang.jpg" />
22                         </div>
23                     </div>
24                     <!-- 轮播（Carousel）导航 -->
25                     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
26                         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
27                         <span class="sr-only">Previous</span>
28                     </a>
29                     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
30                         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
31                         <span class="sr-only">Next</span>
32                     </a>
33                 </div>
34             </div>
35         </div>
36         <!--修改延迟事件：变快-->
37         <script> 
38             $(function(){
39                 $('#myCarousel').carousel({interval:2000});
40             })
41         </script>
42     </body>