Question

我正在开发一个网页布局，其中有多个图像布局在网格中。我希望这些图像中的几个可以旋转两到三个不同的图像，有些图像的速度与其他图像不同，每个图像之间的淡入淡出效果不是那么突然。我已经搜索了一个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"/>

任何人都可以给予我任何帮助将非常感激！

Answer 1

您的代码不是很漂亮，可以通过多种方式进行改进。我做了一个简单的jsFiddle示例，向您展示一两种方法： http://jsfiddle.net/pASkk/

一些意见：

不要使用全局变量，它会与其他代码冲突。我已经创建了一个自执行的around函数来创建一个围绕所有代码的闭包。这样可以保持整洁。
不要使用内联编码（“onload”属性）将js代码与html分开。当然，CSS也是如此。实际上在我的例子中我发现onload是不必要的。在解析dom的一部分之后执行所有代码，因此在示例中就足够了。你想在你的页面底部（而不是在头部）加载你的javascripts，所以通常这就足够了。如果你想要绑定到onload（而不是使用任何库，比如jQuery），请参阅：http://www.quirksmode.org/js/events_advanced.html
使用setInterval进行重复交换（或者我在这里误解了你？）并且不使用字符串来调用setInterval或setTimeout的函数;改为使用匿名函数。

我为单个交换创建了一个单独的函数。我无法访问您的图片来源，因此您需要使用此图片来获取您想要的图片。如果你想做一些更平滑的图像交换我建议使用jQuery fadeIn（http://api.jquery.com/fadeIn/）或类似的东西。如果您无法使用该库，则可以查看其源代码以了解它们是如何创建的。

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

1 个答案: