26.垂直滚动板

垂直滚动板

html部分

    

        
1
        
2
        
3
        
4
    
    

        
1
        
2
        
3
        
4
    
    

        

            
        
        

            
        
    

css部分

*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    overflow: hidden;
}

.slider-container{
    position: relative;
    overflow: hidden;
    height: 100%;
}
.left-slide{
    height: 100%;
    width: 35%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .5s;
}
.left-slide > div{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.right-slide{
    height: 100%;
    position: absolute;
    width: 65%;
    top: 0;
    right: 0;
    transition: all .5s;
}
.right-slide > div{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.button{
    position: absolute;
    display: flex;
    top: 50%;
    left: 31.8%;
    cursor: pointer;
}

.btn{
    padding: 15px;
    background-color: #ccc;
}
.left-btn{
    transform: translateY(-50px);
    
}

js部分

// 获取dom
const left_btn=document.querySelector(".left-btn")
const right_btn=document.querySelector(".right-btn")
const left_slide=document.querySelector(".left-slide")
const right_slide=document.querySelector(".right-slide")
const len=document.querySelectorAll(".left-slide div").length-1

// 当前活动索引
let active_index=0;
// 左侧初始值
left_slide.style.top=`-${len*100}vh`

// 左侧点击事件
left_btn.addEventListener("click",function(){
    active_index++;
    if(active_index>len){
        active_index=0
    }
    handle_bg("left")
})

// 右侧点击事件
right_btn.addEventListener("click",function(){
    active_index--;
    if(active_index<0){
        active_index=len
    }
    handle_bg("right")
})

// 处理背景函数
function handle_bg(index){
    left_slide.style.top=`-${((active_index+len)%(len+1))*100}vh`
    right_slide.style.top=`-${((len-active_index+1)%(len+1))*100}vh`
}

效果