前端入坑紀(jì) 18
好看的人太多，有趣的靈魂太少！最近看到這句話，真的是感觸良多啊。希望自己能逐漸成為后者，那富裕幽默的靈魂。
今天來個(gè)多頁效果，也是給同學(xué)的靜態(tài)網(wǎng)站的效果之一！
多頁切換圖片查看效果
OK，first things first！項(xiàng)目鏈接
HTML 結(jié)構(gòu)
<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>風(fēng)景如畫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>風(fēng)景如畫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>風(fēng)景如畫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>風(fēng)景如畫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>風(fēng)景如畫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>風(fēng)景如畫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:;">關(guān)閉</a>
<p>風(fēng)景如畫</p>
</div>
</div>
我知道圖片的代碼上傳一定又被過濾掉了，小伙伴請(qǐng)移步項(xiàng)目效果里看吧。這次每個(gè)圖片的外包的a標(biāo)簽有個(gè)data-img的自定義屬性，這是給showBox用的。也就是點(diǎn)了小圖片，顯示個(gè)大圖來。
CSS 結(jié)構(gòu)
* {
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的樣式里，那一個(gè)個(gè)圖片顯示，做了個(gè)小技巧。圖片的父級(jí)是用padding撐開的，然后圖片相對(duì)于它定位在垂直水平居中，最后overflow：hidden
JS 結(jié)構(gòu)
var arr = [{
imgsrc: "b00",
cont: "風(fēng)景如畫00"
},{
imgsrc: "b01",
cont: "風(fēng)景如畫01"
}, {
imgsrc: "b02",
cont: "風(fēng)景如畫02"
}, {
imgsrc: "b03",
cont: "風(fēng)景如畫03"
}, {
imgsrc: "b04",
cont: "風(fēng)景如畫04"
}, {
imgsrc: "b05",
cont: "風(fēng)景如畫05"
}, {
imgsrc: "b06",
cont: "風(fēng)景如畫06"
}, {
imgsrc: "b07",
cont: "風(fēng)景如畫07"
}, {
imgsrc: "b09",
cont: "風(fēng)景如畫09"
}, {
imgsrc: "b10",
cont: "風(fēng)景如畫10"
}, {
imgsrc: "b12",
cont: "風(fēng)景如畫11"
}, {
imgsrc: "b13",
cont: "風(fēng)景如畫12"
}, {
imgsrc: "b14",
cont: "風(fēng)景如畫13"
}, {
imgsrc: "b15",
cont: "風(fēng)景如畫14"
}, {
imgsrc: "b16",
cont: "風(fēng)景如畫15"
}, {
imgsrc: "b17",
cont: "風(fēng)景如畫16"
}, {
imgsrc: "b18",
cont: "風(fēng)景如畫17"
}, {
imgsrc: "b19",
cont: "風(fēng)景如畫18"
}, {
imgsrc: "b20",
cont: "風(fēng)景如畫19"
}, {
imgsrc: "b21",
cont: "風(fēng)景如畫20"
}, {
imgsrc: "b22",
cont: "風(fēng)景如畫21"
}, {
imgsrc: "b24",
cont: "風(fēng)景如畫22"
}];
var pageAs = document.getElementById("pageAs").getElementsByTagName("a"),
imgsWrp = document.getElementsByClassName("imgsWrp"),
showBox = document.getElementById("showBox");
// showBox 關(guān)閉按鈕事件
showBox.getElementsByTagName("a")[0].onclick = function() {
showBox.style.display = "none";
}
for (var j = 0; j < imgsWrp.length; j++) {
// 給每個(gè)imgsWrp設(shè)置自定義indx屬性，后面有用
imgsWrp[j].setAttribute("indx", j);
imgsWrp[j].onclick = function() {
showBox.style.display = "block";
// 變更showBox里的圖片地址 = 當(dāng)前子元素a的自定義data-img值
showBox.getElementsByTagName("img")[0].src = this.getElementsByTagName("a")[0].getAttribute("data-img");
// 變更showBox里的p內(nèi)容 = 當(dāng)前子元素p的內(nèi)容
showBox.getElementsByTagName("p")[0].innerText = this.getElementsByTagName("p")[0].innerText;
}
}
for (var i = 0; i < pageAs.length; i++) {
pageAs[i].onclick = (function() {
// 獲取頁碼，從0開始計(jì)數(shù)
var pgNum = Number(this.innerText) - 1;
for (var j = 0; j < imgsWrp.length; j++) {
// 取出之前付給imgsWrp的indx值
var indx = Number(imgsWrp[j].getAttribute("indx"));
// arrNow 每次根據(jù)頁面變更時(shí)，arr數(shù)組里對(duì)應(yīng)的取值，012345，67891011，......
var arrNow = arr[indx + pgNum * imgsWrp.length];
if (arrNow) {
// 如果每次取值時(shí)都有，則顯示imgsWrp
imgsWrp[j].style.display = "block";
// 變更當(dāng)前imgsWrp里圖片的src地址
imgsWrp[j].getElementsByTagName("a")[0].getElementsByTagName("img")[0].src = "http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/" + arrNow.imgsrc + ".jpg";
// 變更當(dāng)前imgsWrp里a的自定義屬性值data-img
imgsWrp[j].getElementsByTagName("a")[0].setAttribute("data-img", "http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/" + arrNow.imgsrc + ".jpg");
// 變更當(dāng)前imgsWrp里p的內(nèi)容
imgsWrp[j].getElementsByTagName("p")[0].innerText = arrNow.cont;
} else {
// 如果每次取值時(shí)沒有，則隱藏imgsWrp
imgsWrp[j].style.display = "none";
}
}
})
}
這次js注釋的很全，感興趣的小伙伴，可以好好研究下。其實(shí)原理很簡(jiǎn)單，就是根據(jù)頁數(shù)，去顯示對(duì)應(yīng)范圍內(nèi)的數(shù)組項(xiàng)目
