<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微活動</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" minimal-ui /> <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script> <link rel="stylesheet" href="../css/swiper.min.css"> <script src="../js/swiper.min.js"></script> <script src="../js/small.js"></script> <link rel="stylesheet" href="../css/test.css"> <script src="../js/app.js"></script></head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><div class="content-slide1">1</div> </div> <div class="swiper-slide"> <div class="content-slide2">2</div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-scrollbar"></div> </div></body> </html>
css代碼如下:
.content-slide1{ width:640px; height:1008px; background: url("../images/bj-1.jpg") no-repeat 0 0; background-size:640px 1008px; } .content-slide2{ width:640px; height:1008px; background: url("../images/bj-2.jpg") no-repeat 0 0; background-size:640px 1008px; }
最后效果如圖
我給content-slide1設置了height108px;它自己給父層的swiper-slide設置了行內樣式height:2046px這是為什么?
swiper.js里面封裝的函數(shù)是怎么設置高度的?原理是什么?