Banner Images Not Rotating After Setting Up JQuery Rotate

I have several jpgs that need to rotate through a div. I donwloaded jquery-rotate and setup what I thought to be the correct layout. However, only the first image displays, and not the 2 through 4 images. Am I using the improper plugin to shuffle through these 4 images? Here's my code:

<div id="bannercontainer">                      
    <div id="banner开发者_StackOverflow中文版"><img src="css/images/banner1.jpg" alt=""></img></div>
    <div id="banner"><img src="css/images/banner2.jpg" alt=""></img></div>
    <div id="banner"><img src="css/images/banner3.jpg" alt=""></img></div>
    <div id="banner"><img src="css/images/banner4.jpg" alt=""></img></div>
</div>

Here's the script and CSS snippets:

<script type="text/javascript" src="js/jquery.rotate/jquery-1.5.min.js"/>   
<script type="text/javascript" src="js/jquery.rotate/jquery.rotate.js"/>
<script type="text/javascript">
    $(document).ready(function() {
        $("#bannercontainer").rotate();
    });
</script>

#bannercontainer{
    overflow:hidden;
    position:relative;
    width: 775px;
    height:148px;
}
#banner div{
    position:absolute;
    top:0;
    left:0;
    z-index:1000;
}

Thanks much for your advice and guidance!

UPDATE: After implementing JQuery Cycle, my code is as follows:

<div id="bannercontainer">
    <img src="css/images/banner1.jpg" alt=""></img>
    <img src="css/images/banner2.jpg" alt=""></img>
    <img src="css/images/banner3.jpg" alt=""></img>
    <img src="css/images/banner4.jpg" alt=""></img>
</div>

CSS:

#bannercontainer{
    position:relative;
    width: 775px;
    height:148px;
    overflow:hidden;
}
#bannercontainer img{
    position:absolute;
    z-index:1000;
}

JS:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"/>   
<script type="text/javascript" 
src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"/>
<script type="text/javascript">
    $(document).ready(function() {
        $('.bannercontainer').cycle({
            fx: 'fade'
        });
    });
</script>

Unfortunately, my images still don't fade as intended.

Your element has id bannercontainer but you are using a class selector.

$('.bannercontainer').cycle({

should be

$('#bannercontainer').cycle({

I think what you want is a slideshow which is different from rotating an image on its own axis, which jquery.rotate.js does. Perhaps this will help
http://jquery.malsup.com/cycle/