swiper轮播图有时候不显示高度有时会显示高度这是什么原因

ttttttttt · 发表于 2018-3-5 13:44:00

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" href="css/idangerous.swiper.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; } .swiper-container { width: 100%; max-height: 200px; } .swiper-slide img { width: 100%; /*height: 100%;*/ } /*.swiper-container,.swiper-wrapper,.swiper-slide{ height: 200px; }*/ .pagination { width: 100%; position: absolute; z-index: 20; bottom: 0px; text-align: center; } .swiper-pagination-switch { display: inline-block; width: 7px; height: 7px; border-radius: 7px; background: #555; margin: 0 0px 5px; opacity: 0.8; border: 1px solid #fff; cursor: pointer; margin-left: 2px; } .swiper-active-switch { background: #fff; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img/banner.png"> </div> <div class="swiper-slide"> <img src="img/banner.png"> </div> <div class="swiper-slide"> <img src="img/banner.png"> </div> <div class="swiper-slide"> <img src="img/banner.png"> </div> </div> <div class="pagination"></div> </div> <div class="container notice"> <div class="row"> <img src="img/notice.png"> <span>发时发生地方发生的发生的发发范德萨的时发生地方</span> <a class="more" href="notice.html">更多</a> </div> </div> <div class="sign_up">  <div class="item"> <div class="box"> <img src="img/schoolopen.png"> <p>开学报名</p> </div> </div> <div class="item"> <div class="box"> <img src="img/activity.png"> <p>开学报名</p> </div> </div>  </div> <div class="container info_box"> <div class="title_box"> <img src="img/school.png"> <span>学校简介</span> </div> <div class="info"> <img src="img/pic.png"> <p>和福克斯倒海翻江肯定会附加肯定是房价开始的恢复复合地基开始恢复健康的是否炬华科技和滑过科技时代黄金矿工接口上党和国家开始韩国见多识广快速订购后就会</p> </div> </div> <script src="js/jquery-1.10.1.min.js"></script> <script src="js/idangerous.swiper.min.js"></script> <script>// $(function() { var mySwiper = new Swiper('.swiper-container', { pagination: '.pagination', loop: true, autoplay: 2000 })// }) </script> </body></html>