前端入坑纪 18

好看的人太多，有趣的灵魂太少！最近看到这句话，真的是感触良多啊。希望自己能逐渐成为后者，那富裕幽默的灵魂。

今天来个多页效果，也是给同学的静态网站的效果之一！

多页切换图片查看效果

OK，first things first！项目链接

HTML 结构

    <div class="mainWrp">
        <section class="clear">
            <div class="imgsWrp">
                <a class="innerImg" href="javascript:;" data-img="http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/b00.jpg">
                    ![](http://upload-images.jianshu.io/upload_images/4732938-97e1fbea337354c6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </a>
                <p>风景如画00</p>
            </div>
            <div class="imgsWrp">
                <a class="innerImg" href="javascript:;" data-img="http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/b01.jpg">
                    ![](http://upload-images.jianshu.io/upload_images/4732938-17f4ab557565eed5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                <p>风景如画01</p>
            </div>
            <div class="imgsWrp">
                <a class="innerImg" href="javascript:;" data-img="http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/b02.jpg">
                    ![](http://upload-images.jianshu.io/upload_images/4732938-acf63054dcf35c49.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                
                <p>风景如画02</p>
            </div>
            <div class="imgsWrp">
                <a class="innerImg" href="javascript:;" data-img="http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/b03.jpg">
                    ![](http://upload-images.jianshu.io/upload_images/4732938-b8c13430f1ba3459.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                
                <p>风景如画03</p>
            </div>
            <div class="imgsWrp">
                <a class="innerImg" href="javascript:;" data-img="http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/b04.jpg">
                    ![](http://upload-images.jianshu.io/upload_images/4732938-37e0b0e658072ce9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
               
                <p>风景如画04</p>
            </div>
            <div class="imgsWrp">
                <a class="innerImg" href="javascript:;" data-img="http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/b05.jpg">
                    ![](http://upload-images.jianshu.io/upload_images/4732938-670ffdc79755abd2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
                
                <p>风景如画05</p>
            </div>
        </section>
        <div class="pgNum" id="pageAs">
            <a href="javascript:;">1</a><a href="javascript:;">2</a><a href="javascript:;">3</a><a href="javascript:;">4</a>
        </div>

        <div id="showBox">
            <a href="javascript:;">关闭</a>
            ![](img/b01.jpg)
            <p>风景如画</p>
        </div>
    </div>

我知道图片的代码上传一定又被过滤掉了，小伙伴请移步项目效果里看吧。这次每个图片的外包的a标签有个data-img的自定义属性，这是给showBox用的。也就是点了小图片，显示个大图来。

CSS 结构

        * {
            margin: 0;
            padding: 0
        }
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        img {
            border: none;
        }
        
        html,
        body {
            font-family: "Microsoft YaHei", Verdana, Geneva, Tahoma, sans-serif;
            height: 100%;
            background: #fefefe;
            text-align: center;
        }
        
        .clear::after {
            content: "";
            display: table;
            clear: both
        }
        
        ul,
        li {
            list-style: none
        }
        
        .imgsWrp {
            float: left;
            width: 33.33%;
            text-align: center;
        }
        
        .imgsWrp p {
            width: 100%;
            margin-bottom: 10px;
            color: #666
        }
        
        .innerImg {
            position: relative;
            display: block;
            height: 0;
            width: 0;
            padding: 33% 47%;
            margin: 10px auto 0;
            overflow: hidden;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-size: 100% auto;
        }
        
        .innerImg img {
            position: absolute;
            left: 0;
            top: 0\9;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%)
        }
        
        .pgNum {
            width: 80%;
            margin: 20px auto;
            text-align: center
        }
        
        .pgNum a {
            display: inline-block;
            margin: 6px;
            border: 1px solid #ccc;
            color: #666;
            width: 30px;
            line-height: 30px;
            height: 30px;
            transition: all 360ms linear;
        }
        
        .pgNum a {
            -webkit-user-select: none;
            user-select: none;
        }
        
        .pgNum a:hover,
        .pgNum a:active,
        .pgNum a.active {
            background-color: skyblue;
            border-color: #fefefe;
            color: #fff;
        }
        
        #showBox {
            display: none;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 9;
            text-align: center;
            background-color: #333;
            background-color: rgba(0, 0, 0, .9)
        }
        
        #showBox img {
            width: 60%;
            margin: 3%
        }
        
        #showBox p {
            color: #fff;
            width: 80%;
            margin: 0 auto;
            line-height: 160%;
        }
        
        #showBox a {
            position: absolute;
            display: block;
            top: 8px;
            right: 8px;
            border-radius: 3px;
            border: 1px solid #fff;
            font-size: 12px;
            padding: 5px 16px;
            color: #fff;
        }

这次css的样式里，那一个个图片显示，做了个小技巧。图片的父级是用padding撑开的，然后图片相对于它定位在垂直水平居中，最后overflow：hidden

JS 结构

        var arr = [{
            imgsrc: "b00",
            cont: "风景如画00"
        },{
            imgsrc: "b01",
            cont: "风景如画01"
        }, {
            imgsrc: "b02",
            cont: "风景如画02"
        }, {
            imgsrc: "b03",
            cont: "风景如画03"
        }, {
            imgsrc: "b04",
            cont: "风景如画04"
        }, {
            imgsrc: "b05",
            cont: "风景如画05"
        }, {
            imgsrc: "b06",
            cont: "风景如画06"
        }, {
            imgsrc: "b07",
            cont: "风景如画07"
        }, {
            imgsrc: "b09",
            cont: "风景如画09"
        }, {
            imgsrc: "b10",
            cont: "风景如画10"
        }, {
            imgsrc: "b12",
            cont: "风景如画11"
        }, {
            imgsrc: "b13",
            cont: "风景如画12"
        }, {
            imgsrc: "b14",
            cont: "风景如画13"
        }, {
            imgsrc: "b15",
            cont: "风景如画14"
        }, {
            imgsrc: "b16",
            cont: "风景如画15"
        }, {
            imgsrc: "b17",
            cont: "风景如画16"
        }, {
            imgsrc: "b18",
            cont: "风景如画17"
        }, {
            imgsrc: "b19",
            cont: "风景如画18"
        }, {
            imgsrc: "b20",
            cont: "风景如画19"
        }, {
            imgsrc: "b21",
            cont: "风景如画20"
        }, {
            imgsrc: "b22",
            cont: "风景如画21"
        }, {
            imgsrc: "b24",
            cont: "风景如画22"
        }];
        var pageAs = document.getElementById("pageAs").getElementsByTagName("a"),
            imgsWrp = document.getElementsByClassName("imgsWrp"),
            showBox = document.getElementById("showBox");
        // showBox 关闭按钮事件
        showBox.getElementsByTagName("a")[0].onclick = function() {
            showBox.style.display = "none";
        }
        for (var j = 0; j < imgsWrp.length; j++) {
            // 给每个imgsWrp设置自定义indx属性，后面有用
            imgsWrp[j].setAttribute("indx", j);
            imgsWrp[j].onclick = function() {
                showBox.style.display = "block";
                // 变更showBox里的图片地址 = 当前子元素a的自定义data-img值
                showBox.getElementsByTagName("img")[0].src = this.getElementsByTagName("a")[0].getAttribute("data-img");
                // 变更showBox里的p内容 = 当前子元素p的内容
                showBox.getElementsByTagName("p")[0].innerText = this.getElementsByTagName("p")[0].innerText;
            }
        }

        for (var i = 0; i < pageAs.length; i++) {
            pageAs[i].onclick = (function() {
                // 获取页码，从0开始计数
                var pgNum = Number(this.innerText) - 1;
                for (var j = 0; j < imgsWrp.length; j++) {
                    // 取出之前付给imgsWrp的indx值
                    var indx = Number(imgsWrp[j].getAttribute("indx"));
                    // arrNow 每次根据页面变更时，arr数组里对应的取值，012345，67891011，......
                    var arrNow = arr[indx + pgNum * imgsWrp.length];
                    if (arrNow) {
                        // 如果每次取值时都有，则显示imgsWrp
                        imgsWrp[j].style.display = "block";
                        // 变更当前imgsWrp里图片的src地址
                        imgsWrp[j].getElementsByTagName("a")[0].getElementsByTagName("img")[0].src = "http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/" + arrNow.imgsrc + ".jpg";
                        // 变更当前imgsWrp里a的自定义属性值data-img
                        imgsWrp[j].getElementsByTagName("a")[0].setAttribute("data-img", "http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/" + arrNow.imgsrc + ".jpg");
                        // 变更当前imgsWrp里p的内容
                        imgsWrp[j].getElementsByTagName("p")[0].innerText = arrNow.cont;
                    } else {
                        // 如果每次取值时没有，则隐藏imgsWrp
                        imgsWrp[j].style.display = "none";
                    }

                }
            })
        }

这次js注释的很全，感兴趣的小伙伴，可以好好研究下。其实原理很简单，就是根据页数，去显示对应范围内的数组项目