基于BootStrap的轮播图

准备

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

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>

 

转载于:https://www.cnblogs.com/ynhwl/p/9576493.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值