Changing Background Images using jQuery

## gistfile1.html
<html>
<head>
    <style type="text/css">
        .bgimage {
            position: fixed;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-color: black;
            width: 100%;
            height: 100%;
        }

        #bgimage1 {
            /* Initiales Bild */
            background-image: url(bg.1.jpg);
        }

        #bgimage2 {
            display: none;
        }
    </style>
    <script type="text/javascript">
        function fadeImages() {
            var bgImages = ["bg.1.jpg", "bg.2.jpg", "bg.3.jpg", "bg.4.jpg"];
            var layer1 = $("#bgimage1");
            var layer2 = $("#bgimage2");
            var counter = 0;
            var fadeDuration = 2000;
            var keepImageDuration = 5000;

            function crossFade() {
                if (counter % 2 === 0) {
                    layer2.css("background-image", "url(" + bgImages[(counter + 1) % bgImages.length] + ")");
                    layer2.fadeIn(fadeDuration, function () {
                        setTimeout(crossFade, keepImageDuration);
                    });
                } else {
                    layer1.css("background-image", "url(" + bgImages[(counter + 1) % bgImages.length] + ")");
                    layer2.fadeOut(fadeDuration, function () {
                        setTimeout(crossFade, keepImageDuration);
                    });
                }

                counter++;
            };

            setTimeout(crossFade, keepImageDuration);
        }
        $().ready(function () {
            fadeImages();
        });
    </script>
</head>

<body>

    <div class="bgimage" id="bgimage1">
    </div>
    <div class="bgimage" id="bgimage2">
    </div>
</body>
</html>