0

我有一个主容器 div，例如：

<div id="ourCustomers" style="height:300px;float:right;width:480px;">
        <div id="topOurCust" style="height:150px;width:480px;">
            <div id="topLeftCust" style="height:150px;width:240px;float:left;">
                <img id="tl1" src="/images/1.png" />
                <img id="tl2" src="/images/2.png" />
            </div>
            <div id="topRightCust" style="height:150px;width:240px;float:right;">
                <img class="one" src="/images/3.png" />
                <img class="two" src="/images/4.png" />
            </div>
        </div>
        <div id="btmOurCust" style="height:150px;width:480px;">
            <div id="btmLeftCust" style="height:150px;width:240px;float:left;">
                <img class="one" src="/images/5.png" />
                <img class="two" src="/images/6.png" />
            </div>
            <div id="btmRightCust" style="height:150px;width:240px;float:right;">
                <img class="one" src="/images/7.png" />
                <img class="two" src="/images/8.png" />                    
            </div>
        </div>
 </div>

我想要做的是在每个正方形中显示一个图像，然后用该 div 中的另一个图像翻转左上图像，等待 4 秒，然后用该 div 中的另一个图像翻转右上图像（和与其他 div 相同）。

我尝试过使用 jquery 切换方法和延迟（对不起，我没有方便的代码，在其他系统上），但发生的事情是我正在显示两个图像，看着它们都隐藏，然后看着它们都显示。另外，我必须为每张图片编写逻辑，而且我确信有一种方法可以更轻松地做到这一点。

我需要使用 Javascript 计时器方法吗？我可以像以前一样使用 jQuery 切换吗？

4

1 回答 1

1

我建议使用 jQuery 循环插件：

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

然后你可以像这样实例化循环插件：

$('#topLeftCust').cycle({ 
    delay: 0, 
    timeout: 16000 
});

$('#topRightCust').cycle({ 
    delay: 4000, 
    timeout: 16000 
});

$('#btmLeftCust').cycle({ 
    delay: 8000, 
    timeout: 16000 
});

$('#btmRightCust').cycle({ 
    delay: 12000, 
    timeout: 16000 
});
于 2013-01-05T23:17:56.630 回答