本文直說布局，不提動畫效果的實現。
移動端輪播圖往往要做到自適應屏幕，一般布局如下：
html
一般側滑無縫式輪播圖都是如此布局，3張輪播的要准備3+2張圖，每個item外套一層有個特別大的width，外面再套一層有在屏幕范圍內的固定寬度，設置overflow：hidden。
<!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>
css
重點是img設置width：100% ，這樣圖片就能隨外層寬度等比縮放。
/*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的支撐。
本節完，若有看客，望不吝拍磚。