Question

我有一个主容器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切换吗？

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

显示多个图像，通过它们旋转jquery

1 个答案: