H5樣式與佈局 -- 響應式的輪播圖佈局

時間 2019-12-19

標籤 h5 樣式佈局響應简体版

原文原文鏈接

本文直說佈局，不提動畫效果的實現。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';
}