请选择 进入手机版 | 继续访问电脑版
本站特色:极好的技术研究氛围!所有技术交流,必有回复!

疯狂Java联盟

 找回密码
 加入联盟
查看: 758|回复: 1

Bootstrap轮播效果

[复制链接]
发表于 2018-4-13 08:18:21 | 显示全部楼层 |阅读模式
本帖最后由 杨恩雄 于 2018-4-13 08:20 编辑

代码如下:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <link rel="stylesheet" href="static/css/bootstrap.min.css"/>  
  5.     <script src="static/js/jquery-3.3.1.min.js"></script>
  6.     <script src="static/js/popper.min.js"></script>
  7.     <script src="static/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>

  10. <div class="col-lg-7" style="padding-left: 10px;">
  11.         <div class="card bg-light mb-3">
  12.                 <div class="card-header">最新上架</div>
  13.                 <div class="card-body" style="background-color: white;">
  14.                         <div id="carouselExampleIndicators" class="carousel slide" data-interval="5000">
  15.                                 <ol class="carousel-indicators" >
  16.                                         <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  17.                                         <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  18.                                         <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  19.                                 </ol>
  20.                                 <div class="carousel-inner"
  21.                                   style="margin-left: 60px;">
  22.                                         <div class="carousel-item active">
  23.                                                 <img class="d-block" width="500" src="static/images/slide1.jpg">
  24.                                         </div>
  25.                                         <div class="carousel-item">
  26.                                                 <img class="d-block" width="500" src="static/images/slide2.jpg" >
  27.                                         </div>
  28.                                         <div class="carousel-item">
  29.                                                 <img class="d-block" width="500" src="static/images/slide3.jpg" >
  30.                                         </div>
  31.                                 </div>
  32.                                 <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
  33.                                         <img src="static/images/back.png" />
  34.                                 </a>
  35.                                 <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
  36.                                         <img src="static/images/next.png" />
  37.                                 </a>
  38.                         </div>
  39.                 </div>
  40.         </div>
  41. </div>
  42. </body>
  43. </html>
复制代码



效果图:


发表于 2018-7-14 23:01:38 | 显示全部楼层
  这个效果,放到商城系统里是完美搭配啊!
您需要登录后才可以回帖 登录 | 加入联盟

本版积分规则

视频、代码、电子书下载
请关注"疯狂图书"公众号
QQ交流1群: 545923995  未满
微信群请扫二维码
QQ交流1群:
545923995
(未满)

小黑屋|手机版|Archiver|疯狂Java联盟 ( 粤ICP备11094030号 )

GMT+8, 2019-8-20 03:21 , Processed in 0.343912 second(s), 6 queries , File On.

快速回复 返回顶部 返回列表