Question

我有几个需要通过div旋转的jpgs。我下载了jquery-rotate并设置了我认为正确的布局。但是，仅显示第一个图像，而不显示2到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 Cycle后，我的代码如下：

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

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

2 个答案: