I have 3 images that do rotate but they don't go back to the 1st one and start over

Question

I have 3 images that I want to rotate back and start over from the first image. Here ismy jQuery, HTML, and CSS. I'm believe the problem is with my jQuery code.

#hero {
    width: 960px; 
    height: 300px;
}
#hero div {
    top: 324px; 
    left: 400px;
    position: absolute; 
    z-index: 0;
}
#hero div.previous {
    z-index: 1;
}
#hero div.current {
    z-index: 2;
}

<div class= "container">
    <div id="hero">
        <div class="current"><img src="prayer2.jpg"></div>
        <div><img src="prayer3.jpg" ></div>
        <div><img src="Prayer1.jpg"></div>
    </div>

$(function() {
    setInterval("rotateImages()",3000);
});

function rotateImages() {
    var c1 = $('#hero div.current');
    var n1 = c1.next();

    if (n1.length == 0)
        n1 = $('#hero div: first');

    c1.removeClass('current').addClass('previous');
    n1.css({ opacity: 0.0 }).addClass('current')
        .animate({ opacity: 1.0 }, 1000, function() {
            c1.removeClass('previous');
        });
}

Answer 1

There are many issues with the code,

1. $('#hero div: first'); - Unrecognized expression. It should be $('#hero div:first'); - Notice the space.
2. Change the setInterval call to setInterval(rotateImages,3000);. The reason is "rotateImages()" runs in a global scope. Refer