jquery slide animation 2(20150908)

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>슬라이드</title>
<script src="js/jquery-1.11.3.js"></script>
<style>
    #slider {
        position: relative;
        margin: 0 auto;
        width: 500px;
        height: 300px;
        overflow: hidden;
    }
    #slider img {
        position: absolute; /* relative */
        top: 0;
        left: 0;
        opacity:0;
    }
</style>
</head>
<body>
    <div id="slider">
        <img src="images/food.jpg">
        <img src="images/sports.jpg">
        <img src="images/nature.jpg">
        <img src="images/fashion.jpg">
        <img src="images/transport.jpg">
    </div>
    <script>
        var sno = 0;
        var slide = $("#slider > img");
        var max = slide.length - 1;
        $(slide[sno]).css({"opacity":"1"});
        $("#slider").click(function(){
            $(slide[sno]).animate({"opacity":0},1000);
            sno++;
            if( sno > max ) sno = 0;
            $(slide[sno]).animate({"opacity":1},1000);
        });
        var timer = setInterval(function(){
            $("#slider").click();
        },1000);
    </script>
</body>
</html>