Image 在时间间隔内使用图像设置div动画

下面是我的div框

<div id="one1" class="f"></div>
    <div id="one2" class="f"></div>

   <div id="two1" class="s"></div>
    <div id="two2" class="s"></div>

   <div id="three1" class="c"></div>
    <div id="three2" class="c"></div>

   <div id="four1" class="d"></div>
    <div id="four2" class="d"></div>

#one1{width:114px; height:35px; background-image:url(about1.png); float:left; margin-left:10px;}
#one2{width:114px; height:35px; background-image:url(about-rollover.png); margin-left:10px; float:left}

#two1{width:114px; height:35px; background-image:url(about1.png); float:left; margin-left:10px;}
#two2{width:114px; height:35px; background-image:url(about-rollover.png); margin-left:10px; float:left}

#three1{width:114px; height:35px; background-image:url(about1.png); float:left; margin-left:10px;}
#three2{width:114px; height:35px; background-image:url(about-rollover.png); margin-left:10px; float:left}

#four1{width:114px; height:35px; background-image:url(about1.png); float:left; margin-left:10px;}
#four2{width:114px; height:35px; background-image:url(about-rollover.png); margin-left:10px; float:left}

---

我需要这个框来改变图像在一定的时间水平。第一个图像改变图像在一定的时间间隔。完成后，下一步更改图像。在第四个图像更改后，我需要启动第一个图像。如果将鼠标悬停在图像上，则表示必须清除所有时间间隔。请给我一些建议。

您可以尝试使用jquery插件，例如。它们有很好的过渡效果，

您可以

animate（）

jQuery函数。你试过什么吗？给我们看看你的代码