寻找一种在一个页面上运行多个图像循环仪的方法

我正在处理一个网页布局，该布局在网格中布置了多个图像。我希望其中几张图像在两到三张不同的图像中旋转，有些图像的速度与其他图像不同，每张图像之间的淡入淡出效果并不那么突然。我已经搜索了一个 javascript 程序，但我想出的所有程序似乎都不赞成同时在页面上更改 5 个单独的图像。我已经阅读了几个建议，您可以使用五个不同的名称运行相同的程序五次，但是在我尝试过的每个程序上都失败了(第一个工作正常，其余的只显示静态图像(。

我现在有一个解决方案，使所有五个图像旋转，但没有褪色并且同时旋转，所以它看起来像一个非常生涩的、突然的切换五个图像，而不是平滑的淡入淡出过渡这里和那里。此外，在它运行几个周期后，它似乎开始变得......卡住了？看起来闪烁而奇怪。

哦，由于网格布局，每个图像都绝对以特定的坐标定位，所以我需要一些不会引起问题的东西(即图像周围没有框架/边框等(。

我目前拥有的看起来像这样：

<script type="text/javascript">
var ready = 0;
var which = 1;
function isReady( ) {
++ready;
  if ( ready == 2 ) {
  ready = 0;
  setTimeout("swap()",6000);
  }
}
function swap( ) {
var i1 = document.getElementById("tst1");
var i2 = document.getElementById("tst2");
var i3 = document.getElementById("tst3");
var i4 = document.getElementById("tst4");
var i5 = document.getElementById("tst5");
var cur = which;
which = ( cur == 0 ) ? 1 : 0;
i1.src = i1.src.replace("-" + cur + ".jpg", "-" + which + ".jpg" );
i2.src = i2.src.replace("-" + cur + ".jpg", "-" + which + ".jpg" );
i3.src = i3.src.replace("-" + cur + ".jpg", "-" + which + ".jpg" );
i4.src = i4.src.replace("-" + cur + ".jpg", "-" + which + ".jpg" );
i5.src = i5.src.replace("-" + cur + ".jpg", "-" + which + ".jpg" );
}
</script>

使用此 HTML：

<!-- row a --> 
<!-- top row image (140px x 140px) that rotates in square a2--> 
<img id="tst1" class="a2" src="/wp-content/themes/silk/images/home-a2-0.jpg" 
  onload="isReady()"
  alt="brushes"/>
<!-- static image (140px x 140px) in square a3 --> 
<img id="estd" class="a3" src="/wp-content/themes/silk/img/2012-home.gif" alt="2012" />
<!-- top row large image (280px x 280px) that rotates in square a5 -->
<img id="tst2" class="a5" src="/wp-content/themes/silk/images/home-a5-0.jpg" 
  onload="isReady()"
  alt="stations"/>
<!-- row b -->
<!-- static image (280px x 280px) in square b1-->
<div id="logo" class="b1"><h1>Silk the Salon</h1></div>
<!-- static image (140px x 140px) in square b4-->
<img id="b4" class="b4" src="/wp-content/themes/silk/images/home-b4-0.jpg" alt="backsplash" />
<!-- middle row image (140px x 140px) that rotates in square b7 -->
<img id="tst3" class="b7" src="/wp-content/themes/silk/images/home-b7-0.jpg" 
  onload="isReady()"
  alt="floor"/>
<!-- row c -->
<!-- bottom row image (140px x 140px) that rotates in square c3 -->
<img id="tst4" class="c3" src="/wp-content/themes/silk/images/home-c3-0.jpg" 
  onload="isReady()"
  alt="stations2"/>     
<!-- bottom row image (140px x 140px) that rotates in square c3 -->
<img id="tst5" class="c6" src="/wp-content/themes/silk/images/home-c6-0.jpg" 
  onload="isReady()"
  alt="counter"/>

任何人能给我的任何帮助将不胜感激！