设置JQuery旋转后，横幅图像不旋转

Question

我有几个需要在div中旋转的jpgs。我没有加载jquery-rotate，并设置了我认为正确的布局。但是，只显示第一个图像，而不显示2到4个图像。我是否使用了不正确的插件来处理这4张图片？下面是我的代码：

<div id="bannercontainer">                      
    <div id="banner"><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>

下面是脚本和CSS代码片段：

<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;
}

非常感谢您的建议和指导！

更新:在实现JQuery周期后，我的代码如下：

<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>

不幸的是，我的图像仍然不能像预期的那样褪色。

Answer 1

您的元素具有id bannercontainer，但您使用的是类选择器。

$('.bannercontainer').cycle({

应该是

$('#bannercontainer').cycle({

Answer 2

我认为你想要的是一个幻灯片，它不同于jquery.rotate.js所做的在图像轴上旋转图像。也许这会有帮助

http://jquery.malsup.com/cycle/