fade in/out

<!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;}
        .prevnext .next { float:right;}
    </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">Prev</div>
            <div class="next">Next</div>
        </div>
    </div>
    <script>
        $("#slide img").hide();
        $("#s1").show();
        var sno = 1;
        function fade(num) {
                $("#s" + sno).fadeOut();
                sno = sno + num;
                if(sno > 5) sno = 1;
                if(sno < 1) sno = 5;
                $("#s" + sno).fadeIn();
        }
        $(".prev").click( function(){fade(1);} );
        $(".next").click( function(){fade(-1);} );
        var timer = setInterval(function(){fade(1);},2000);
    </script>
</body>
</html>