0

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

任何人都可以给我的任何帮助将不胜感激！

4

1 回答 1

0

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

一些评论：

  1. 不要使用全局变量，它会与其他代码发生冲突。我制作了一个自动执行的环绕函数来围绕所有代码创建一个闭包。这将保持整洁。

  2. 不要使用内联编码（“onload”属性） 将 js 代码与 html 分开。当然，CSS 也是如此。实际上，在我的示例中，我发现 onload 是不必要的。所有代码都在解析完 dom 的一部分后执行，因此在示例中就足够了。您想在页面底部（而不是头部）加载您的 javascript，所以通常这就足够了。如果您想绑定到 onload （而不使用任何库，如 jQuery），请参阅：http ://www.quirksmode.org/js/events_advanced.html

  3. 使用 setInterval 进行重复交换（或者我在这里误解了你吗？）并且不要使用字符串来调用具有 setInterval 或 setTimeout 的函数；改用匿名函数。

我为单个交换创建了一个单独的函数。我无权访问您的图像源，因此您需要处理这个以按照您想要的方式获得它。如果你想做一些更平滑的图像交换，我建议使用 jQuery fadeIn (http://api.jquery.com/fadeIn/) 或类似的东西。如果您不能使用该库，您可以查看他们的源代码以了解他们是如何制作的。

祝你好运

于 2012-05-07T06:48:15.783 回答