关于轮播图的一些思路

通常写轮播图结构是这样的

外层box设定宽高，内部多出来的就隐藏，

那个时候我就在想如果内部图片很多no-wrap层就要设定的很宽这还是知道图片大概有多少的情况

要是动态加载的话不是要动态的计算内部的no-wrap层并设定宽度吗？？需要这么麻烦吗？

显然是不需要的，无论多少动态加入多少图片都是相同的道理，有时候你可以充分的利用CSS

而不是总考虑js怎么写，这就是CSS的魅力；

利用white-space:nowrap 就可以保证图片不在换行，其它的就是时利用CSSposition定位或者transform: translateX
移动no-wrap层，原理就是这样，这里只是提供个思路，相信在github上一搜索一大把，不多描述
下面的demo可以看看
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid red;
            height: 150px;
            width: 300px;
            /* overflow: hidden; */
            /* position: relative; */
        }
        .no-warp{
            border: 1px solid yellow;
            white-space:nowrap; 
            transform: translateX(10px);
            /* position:absolute; */
            /* left: 0px; */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="no-warp">
            <img src="" alt="">
        </div>
    </div>
    <script>
        var wrap = document.getElementsByClassName("no-warp")[0];
        for(let i=0;i<10;i++){
            var imgObj = new Image(300,150);
            imgObj.src = "./image/1.png";
            wrap.appendChild(imgObj);
        }
    </script>
</body>
</html>

posted on 2018-02-28 10:35  一梦清水  阅读(202)  评论(0)  编辑  收藏  举报

导航