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'; }

 

總結:越靈活的佈局越須要js的支撐。spa

 

本節完,如有看客,望不吝拍磚。scala

相關文章
相關標籤/搜索