滚动图片案例

    
    
    
    .content {
        width: 100%;
        height: 3000px;
    }
    .topBox {
        width: 100%;
        height: 800px;
        background-color: #ccc;
    }
    .imgBox {
        position: relative;
        width: 100%;
    }
    .imgBox .wrapper {
        position: relative;
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    .imgBox .wrapper .leftText {
        flex: 1;
    }
    .imgBox .wrapper .rightImg {
        position: relative;flex: 1;
    }
    .photo {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        opacity: 1;
        transition: opacity 1s ease;
        background-color: aqua;
    }
    .photo_1 {
        opacity: 0;
        z-index: 1;
    }
    .photo_2 {
        opacity: 0;
        z-index: 2;
    }
    .photo_3 {
        opacity: 0;
        z-index: 3;
    }
    .photo_4 {
        opacity: 0;
        z-index: 4;
    }
    .photo_5 {
        opacity: 0;
        z-index: 5;
    }
    .bottomBox {
        width: 100%;
        height: 200px;
        background-color: #f3deac;
    }
    


    
        
        
            
                
                    
测试
                
                
                    
                    
                    
                    
                    
                
            
        
        
    
    

实现效果：滑动到图片包裹层的时候，图片层固定定位，继续下滑，图片切换，上滑的时候恢复