本文直說佈局,不提動畫效果的實現。javascript
移動端輪播圖每每要作到自適應屏幕,通常佈局以下:css
htmlhtml
通常側滑無縫式輪播圖都是如此佈局,3張輪播的要準備3+2張圖,每一個item外套一層有個特別大的width,外面再套一層有在屏幕範圍內的固定寬度,設置overflow:hidden。java
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>test</title> <link rel="stylesheet" type="text/css" href="./index.css"> </head> <body> <div>移動端常見的根據可視區寬度自適應的輪播圖佈局。</div><br/> <div class="slider"> <div class="slider-group"> <div class="slider-item"> <a href="javascript:;"> <img src="./3.jpg"> </a> </div> <div class="slider-item"> <a href="javascript:;"> <img src="./1.jpg"> </a> </div> <div class="slider-item"> <a href="javascript:;"> <img src="./2.jpg"> </a> </div> <div class="slider-item"> <a href="javascript:;"> <img src="./3.jpg"> </a> </div> <div class="slider-item"> <a href="javascript:;"> <img src="./1.jpg"> </a> </div> </div> <div class="dots"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> </div> </div> </body> <script type="text/javascript" src="./index.js"></script> <script type="text/javascript"> window.onload = function() { setSliderWidth(); } </script> </html>
csside
重點是img設置width:100% ,這樣圖片就能隨外層寬度等比縮放。oop
/*min-height: 1px 是爲了防止文本的溢出*/
.slider {
position: relative;
overflow: hidden;
min-height: 1px;
}
.slider-groups {
position: relative;
overflow: hidden;
white-space: nowrap;
}
.slider-item {
float: left;
box-sizing: border-box;
overflow: hidden;
text-align: center;
}
.slider-item a {
display: block;
width: 100%;
overflow: hidden;
text-decoration: none;
}
.slider-item img {
display: block;
width: 100%;
}
/* right: 0;left: 0; 是爲了使width爲100%, 有了寬度text-align才能生效,固然你直接寫width:100%也行*/
.dots {
position: absolute;
right: 0;
left: 0;
bottom: 12px;
text-align: center;
font-size: 0;
}
.dot {
display: inline-block;
margin: 0 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: green;
}
.active {
width: 20px;
border-radius: 5px;
background: rgb(255, 205, 49);
}
js佈局
這是重點。在每次頁面初始化時設定特別大width具體的值動畫
function setSliderWidth() { const p = document.getElementsByClassName('slider')[0]; const c = document.getElementsByClassName('slider-group')[0]; const ifLoop = true; let children = c.children; let width = 0;
//注意三個xxWidth值的區別,clientWidth包含了頁面右側滑軌的寬度 // let sliderWidth = p.clientWidth; // let sliderWidth = p.offsetWidth; let sliderWidth = window.innerWidth; for(let i=0;i<children.length;i++) { let child = children[i]; child.style.width = sliderWidth + 'px'; width += sliderWidth; }; if(ifLoop) { width += 2 * sliderWidth; }; c.style.width = width + 'px'; }
總結:越靈活的佈局越須要js的支撐。spa
本節完,如有看客,望不吝拍磚。scala