JQuery Image Slider

<!--
Author: Giacomo Rizzi (gcmrzz@gmail.com)
Date: 3rd feb 2014
-->

<!doctype html>
<html lang="en">
    <head>
        <title>JQuery image slider</title>
        <meta charset="UTF-8"/>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

        <style>
            #slider {
                width: 800px;
                height: 500px;
                overflow: hidden;
                text-align: center;
                background: #000;
                position: relative;
            }

            #slider img {
                display: none;
            }

            #slider img.show {
                display: block;
                max-width: 100%;
                max-height: 100%;
                margin: auto auto;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }

        </style>
    </head>
    <body>


        <div id="slider">
            <img src="img1.jpg" alt="img1">
            <img src="img2.jpg" alt="img2">
            <img src="img3.jpg" alt="img3">
            <img src="img4.jpg" alt="img4">
            <!-- And so on... -->
        </div>

        <script>

            var slider = $('#slider'),
                images = slider.children('img'),

                // The image timeout in milliseconds
                timeout = 1000,

                // The animation timeout in milliseconds
                animation = 400;


            images.first().addClass('show');

            setInterval(function() {

                var current = slider.find('.show');
                var next = current.next('img');

                if (next.attr('src') == null) {
                    next = images.first();
                }
                next.css('opacity', 0);
                next.first().addClass('show');

                next.animate({'opacity' : 1}, animation);
                current.animate({'opacity' : 0}, animation, function() {
                    current.removeClass('show')
                })

            }, timeout);

        </script>
    </body>
</html>