<style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        #banner {
            height: 100%;
            overflow: hidden;
        }
        .section{
            height: 100%;
        }
        .section1{
            background: aquamarine;
        }
        .section2{
            background: #990000;
        }
        .section3{
            background: chartreuse;
        }
        .section4{
            background: cadetblue;
        }
        .section5{
            background: darkolivegreen;
        }
        .btn{
            position: absolute;
            top: 500px;
            left: 100px;
        }
    </style>

<p id="banner">
        <p class="section section1"></p>
        <p class="section section2"></p>
        <p class="section section3"></p>
        <p class="section section4"></p>
        <p class="section section5"></p>
        <input class="btn" type="button" value="下一页"/>
    </p>

想实现竖向的全屏切换，点击下一页的时候切换到下一个section，该怎么实现？求个思路