前端入坑纪 14

今天也是个好日子，阳光正好，更新来了，继续码字中......

素颜轮播

OK，first things first！项目链接

HTML 结构

    <div class="swipWrp">
        <a href="javascript:;" class="arwL"></a>
        <div id="swiper" class="clearfix" style="transition: all 1s linear;transform:translateX(0)">
            ![](img/b01.jpg)
            ![](img/b02.jpg)
            ![](img/b03.jpg)
            ![](img/b04.jpg)
            ![](img/b05.jpg)
        </div>
        <a href="javascript:;" class="arwR"></a>
    </div>

div.swipWrp 是最外面100%宽度的父级，超过该宽度的子元素隐藏overflow：hidden

CSS结构

        body {
            font-family: "Microsoft YaHei", Verdana, Geneva, Tahoma, sans-serif;
        }
        
        html,
        body,
        ul,
        li {
            margin: 0;
            padding: 0
        }
        
        .clearfix::after {
            content: "";
            display: table;
            clear: both
        }
        
         ::-webkit-scrollbar {
            display: none
        }
        
        ul,
        li {
            list-style: none
        }
        
        .swipWrp {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        
        .arwL,
        .arwR {
            display: block;
            position: absolute;
            padding: 3%;
            background-size: 80% auto;
            background-position: center center;
            background-repeat: no-repeat;
            top: 50%;
            transform: translateY(-50%);
            z-index: 9
        }
        
        .arwL {
            left: 0;
            background-image: url(img/arrowL.png)
        }
        
        .arwR {
            right: 0;
            background-image: url(img/arrowR.png)
        }
        
        .swipWrp>div>img {
            float: left;
            line-height: 0;
            font-size: 0;
            width: 15%;
            margin: 0 .833%;
        }
        
        .swipWrp>div {
            width: 600%;
        }

这里的关键是设置宽度的问题，首先 .swipWrp为100%，然后里面的div为600%，这样div里的图片再是相对于div又是100除以6张的值

JS结构

       var swpOuter = document.getElementsByClassName("swipWrp")[0];
        var swiper = document.getElementById("swiper");
        var imgs = swiper.getElementsByTagName("img");
        var arwL = document.getElementsByClassName("arwL")[0];
        var arwR = document.getElementsByClassName("arwR")[0];
        var timer = null;
        var num = 0;

        var newNode = document.createElement("img");
        newNode.src = imgs[0].src;
        swiper.appendChild(newNode);

        function efect() {
            if (num == imgs.length) {
                swiper.style.transition = "";
                swiper.style.transform = "translateX(0)";
                setTimeout(function() {
                    num = 1;
                    swiper.style.transition = "all 1s linear";
                    swiper.style.transform = "translateX(" + num * (-16.66) + "%)";
                }, 0)

            } else {
                swiper.style.transition = "all 1s linear";
                swiper.style.transform = "translateX(" + num * (-16.66) + "%)";
            }

        }

        function changer() {

            if (num <= imgs.length) {
                num++
                efect()
            } else {
                num = 0;
                efect()
            }

        }
        arwL.onclick = function() {

            if (num > 0) {
                num--
            } else {
                num = imgs.length;
            }
            efect()
        }
        arwR.onclick = function() {
            if (num < imgs.length) {
                num++
            } else {
                num = 0;
            }
            efect()
        }
        swpOuter.onmouseover = function() {
            clearInterval(timer)
        }
        swpOuter.onmouseleave = function() {
            timer = setInterval(changer, 3800)
        }
        timer = setInterval(changer, 3800)

轮播的无缝切换和之前的单条新闻滚动差不多，注解就不上了。有兴趣的，可以看看！