jquery slider top/down by lee

<!doctype html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <style>
        #slide { position:relative; width:900px; height:300px; overflow:hidden; }
        #slide img{ position:absolute; top:0; left:0;}
        .prevnext { position:absolute; top:135px; left:0; width:100%; height:30px;}
        .prevnext div { width:50px; height:30px; background:#fff; line-height:30px;text-align:center; opacity:0.5; cursor:pointer;}
        .prevnext div:hover {color:red;}
        .prevnext .prev { float:left; margin-left:430px; margin-top:120px; }
        .prevnext .next { float:right;margin-right:420px;margin-top:-260px; }
    </style>
</head>
<body>
    <div id="slide">
        <img id="s1" src="http://lorempixel.com/900/300/city">
        <img id="s2" src="http://lorempixel.com/900/300/food">
        <img id="s3" src="http://lorempixel.com/900/300/nature">
        <img id="s4" src="http://lorempixel.com/900/300/animals">
        <img id="s5" src="http://lorempixel.com/900/300/business">
        <div class="prevnext">
            <div class="prev">bottom</div>
            <div class="next">top</div>
        </div>
    </div>
    <script>
        $("#slide img").css("top","-300px");
        $("#s1").css("top","0");
        var sno = 1;
        function fade(num) {
                if(num < 1) {
                    $("#s" + sno).animate({top: "-300px"}, 500);
                } else {
                    $("#s" + sno).animate({top: "300px"}, 500);
                }

                sno += num;
                if(sno > 5) sno = 1;
                if(sno < 1) sno = 5;
                if(num < 1) {
                    $("#s" + sno).css("top","300px");
                } else {
                    $("#s" + sno).css("top","-300px");
                }
                $("#s" + sno).animate({top: "0"}, 500);
        }
        $(".prev").click( function(){fade(-1);} );
        $(".next").click( function(){fade(1);} );
    </script>
</body>
</html>