准备
先设计一个承载轮播图的区域：四周向外阴影、扁平圆角：
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
时间： 2024-08-04 03:45:17