照片框
效果圖
HTML結(jié)構(gòu)
<div class="wch-scroll-picture">
<div class="wch-picture"></div>
<div class="wch-outline"></div>
<div class="wch-picture-download"></div>
<div class="wch-picture-2"></div>
<div class="wch-picture-3"></div>
<div class="wch-picture-4"></div>
</div>
主要有兩個(gè)大部分組成一個(gè)是承載照片的照片框容器<div class="wch-scroll-picture">，還有一部分是里面的照片容器讯私。
CSS結(jié)構(gòu)
CSS也是分為兩部分來(lái)看首先是 照片框容器
.wch-scroll-picture{
height: 100%;
width: 100%;
display: block;
box-sizing: border-box;
overflow-y: scroll;
transition:all 2s ease 0.2s;
}
.wch-scroll-picture::-webkit-scrollbar { width: 0 !important }
.wch-scroll-picture { -ms-overflow-style: none; }
.wch-scroll-picture { overflow: -moz-scrollbars-none; }热押、
我會(huì)盡量詳細(xì)的說(shuō)明每一個(gè)屬性的作用
height: 100%;width: 100%;設(shè)置了容器的高度為100% 寬度也是100% 生效的前提是設(shè)置了body 和 html 元素的高度和寬度也是 100%。
display: block;box-sizing: border-box;設(shè)置為塊級(jí)元素 并設(shè)置 盒模型為帶邊框計(jì)算模型斤寇。
overflow-y: scroll;設(shè)置豎軸Y超出部分為滑動(dòng)顯示桶癣。
transition:all 2s ease 0.2s; 設(shè)置屬性平滑變化
.wch-scroll-picture::-webkit-scrollbar { width: 0 !important }
.wch-scroll-picture { -ms-overflow-style: none; }
.wch-scroll-picture { overflow: -moz-scrollbars-none; }
強(qiáng)制覆蓋設(shè)置側(cè)邊滑動(dòng)欄寬度為0，隱藏側(cè)邊滑動(dòng)欄娘锁。
接下來(lái)看的是照片容器的設(shè)置牙寞，因?yàn)樗姓掌瑯邮蕉际谴笸‘悾栽诖酥豢匆粋€(gè)了莫秆。
.wch-picture{
height: 100%;
width: 100%;
background: url(./img/dawn.png) no-repeat 0 0;
background-size: cover;
background-attachment: fixed;
box-sizing: border-box;
}
這里需要注意的是設(shè)置了高度和寬度為100%间雀，同時(shí)設(shè)置了background-attachment: fixed;此屬性的作用是是的此元素在頁(yè)面滑動(dòng)的時(shí)候固定不會(huì)跟著一起滑動(dòng)這邊劃重點(diǎn)哈财松，哈哈辕羽。
JS部分
var index = 1;
window.setInterval(function(){
var sc = window.document.getElementsByClassName("wch-scroll-picture")[0];
var height = document.body.clientHeight;
sc.scrollTo({top:height*index,behavior:"smooth"})
index = index +1;
if(index == 4){
index = 0;
}
}, 2000);
這邊就是簡(jiǎn)單使用定時(shí)器定時(shí)將照片框的定位到每張不同的照片，很簡(jiǎn)單气筋，沒(méi)什么好說(shuō)的哈缝驳。
總結(jié)
本文的所以代碼資源可以點(diǎn)擊鏈接下載
有待改進(jìn)的地方
- 沒(méi)有在頁(yè)面做小圓點(diǎn)提示當(dāng)前照片頁(yè)數(shù)位置
- 在照片也過(guò)多時(shí)连锯，設(shè)置的間隔時(shí)間不夠返回頁(yè)頂，導(dǎo)致頁(yè)面錯(cuò)亂用狱。
