照片框

效果图

picturebox.gif

HTML结构

            <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>

主要有两个大部分组成一个是承载照片的照片框容器<div class="wch-scroll-picture">，还有一部分是里面的照片容器。

CSS结构

CSS也是分为两部分来看首先是 照片框容器

.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; }、

我会尽量详细的说明每一个属性的作用
height: 100%;width: 100%;设置了容器的高度为100% 宽度也是100% 生效的前提是设置了body 和 html 元素的高度和宽度也是 100%。
display: block;box-sizing: border-box;设置为块级元素 并设置 盒模型为带边框计算模型。
overflow-y: scroll;设置竖轴Y超出部分为滑动显示。
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; }

强制覆盖设置侧边滑动栏宽度为0，隐藏侧边滑动栏。

接下来看的是照片容器的设置，因为所有照片样式都是大同小异，所以在此只看一个了。

.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;

}

这里需要注意的是设置了高度和宽度为100%，同时设置了background-attachment: fixed;此属性的作用是是的此元素在页面滑动的时候固定不会跟着一起滑动这边划重点哈，哈哈。

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);

这边就是简单使用定时器定时将照片框的定位到每张不同的照片，很简单，没什么好说的哈。

总结

本文的所以代码资源可以点击链接下载
有待改进的地方

1. 没有在页面做小圆点提示当前照片页数位置
2. 在照片也过多时，设置的间隔时间不够返回页顶，导致页面错乱。