前端入坑纪 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">
</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">
</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">
</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">
</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">
</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">
</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>
<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注释的很全，感兴趣的小伙伴，可以好好研究下。其实原理很简单，就是根据页数，去显示对应范围内的数组项目
网友评论