自动img更改

Question

嘿，你好吗？ 我遇到了一个问题 - 我有一个网站，有一个名为“mosaicdiv”的div。该div包含links-images（）的子div。我希望这些图像和链接随机更改为数据库中的其他图像。所以，我试图把它与阿贾克斯进行：

<? $fdata = DisplayFeaturedMembers(15); ?> 
    <div id="mosaicdiv" style="width:70%; height: 330px; float:left;"> 
    <div id="1" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[1]['username']).", ".$fdata[1]['age'].", ".$fdata[1]['country']."<br />".ucfirst($fdata[1]['headline']); ?>" href="<?=$fdata[1]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[1]['image']; ?>"/></a></div></div> 
    <div id="2" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[2]['username']).", ".$fdata[2]['age'].", ".$fdata[2]['country']."<br />".ucfirst($fdata[2]['headline']); ?>" href="<?=$fdata[2]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[2]['image']; ?>"/></a></div></div> 
    <div id="3" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[3]['username']).", ".$fdata[3]['age'].", ".$fdata[3]['country']."<br />".ucfirst($fdata[3]['headline']); ?>" href="<?=$fdata[3]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[3]['image']; ?>"/></a></div></div> 
    <div id="4" style="position:relative; width:100px; height:100px; left:200px; float:left;"><div><a title="<?=ucfirst($fdata[4]['username']).", ".$fdata[4]['age'].", ".$fdata[4]['country']."<br />".ucfirst($fdata[4]['headline']); ?>" href="<?=$fdata[4]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[4]['image']; ?>"/></a></div></div> 

    <div id="5" style="position:relative; width:100px; height:100px; left:100px; float:left;clear:both;"><div><a title="<?=ucfirst($fdata[5]['username']).", ".$fdata[5]['age'].", ".$fdata[5]['country']."<br />".ucfirst($fdata[5]['headline']); ?>" href="<?=$fdata[5]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[5]['image']; ?>"/></a></div></div> 
    <div id="6" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[6]['username']).", ".$fdata[6]['age'].", ".$fdata[6]['country']."<br />".ucfirst($fdata[6]['headline']); ?>" href="<?=$fdata[6]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[6]['image']; ?>"/></a></div></div> 
    <div id="7" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[7]['username']).", ".$fdata[7]['age'].", ".$fdata[7]['country']."<br />".ucfirst($fdata[7]['headline']); ?>" href="<?=$fdata[7]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[7]['image']; ?>"/></a></div></div> 
    <div id="8" style="position:relative; width:100px; height:100px; left:200px; float:left;"><div><a title="<?=ucfirst($fdata[8]['username']).", ".$fdata[8]['age'].", ".$fdata[8]['country']."<br />".ucfirst($fdata[8]['headline']); ?>" href="<?=$fdata[8]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[8]['image']; ?>"/></a></div></div> 

    <div id="9" style="position:relative; width:100px; height:100px; left:0px; float:left;clear:both;"><div><a title="<?=ucfirst($fdata[9]['username']).", ".$fdata[9]['age'].", ".$fdata[9]['country']."<br />".ucfirst($fdata[9]['headline']); ?>" href="<?=$fdata[9]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[9]['image']; ?>"/></a></div></div> 
    <div id="10" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[10]['username']).", ".$fdata[10]['age'].", ".$fdata[10]['country']."<br />".ucfirst($fdata[10]['headline']); ?>" href="<?=$fdata[10]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[10]['image']; ?>"/></a></div></div> 
    <div id="11" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[11]['username']).", ".$fdata[11]['age'].", ".$fdata[11]['country']."<br />".ucfirst($fdata[11]['headline']); ?>" href="<?=$fdata[11]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[11]['image']; ?>"/></a></div></div> 
    <div id="12" style="position:relative; width:100px; height:100px; left:100px; float:left;"><div><a title="<?=ucfirst($fdata[12]['username']).", ".$fdata[12]['age'].", ".$fdata[12]['country']."<br />".ucfirst($fdata[12]['headline']); ?>" href="<?=$fdata[12]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[12]['image']; ?>"/></a></div></div> 
    <div id="13" style="position:relative; width:100px; height:100px; left:200px; float:left;"><div><a title="<?=ucfirst($fdata[13]['username']).", ".$fdata[13]['age'].", ".$fdata[13]['country']."<br />".ucfirst($fdata[13]['headline']); ?>" href="<?=$fdata[13]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[13]['image']; ?>"/></a></div></div> 

    <div id="14" style="position:relative; width:100px; height:100px; left:300px; float:left;clear:both;"><div><a title="<?=ucfirst($fdata[14]['username']).", ".$fdata[14]['age'].", ".$fdata[14]['country']."<br />".ucfirst($fdata[14]['headline']); ?>" href="<?=$fdata[14]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[14]['image']; ?>"/></a></div></div> 
    <div id="15" style="position:relative; width:100px; height:100px; left:400px; float:left;"><div><a title="<?=ucfirst($fdata[15]['username']).", ".$fdata[15]['age'].", ".$fdata[15]['country']."<br />".ucfirst($fdata[15]['headline']); ?>" href="<?=$fdata[15]['link']; ?>"><img width="100px" height="100px" src="<?=$fdata[15]['image']; ?>"/></a></div></div> 
    </div> 

     function getRandomInt(min, max) 
      { 
       return Math.floor(Math.random() * (max - min + 1)) + min; 
      } 

      function startAnim(idn) { 
       var interval = idn*1; 
       interval += 5; 
       interval += getRandomInt(5,60); 
       $$("#mosaicdiv #"+idn+" div").each(function(id) { 
        new PeriodicalExecuter(function(pe) { 
         new Effect.Fade(id,{duration:1.5, afterFinish: function(){ 
           var oOptions = { onSuccess: function(oXHR, oJson){ 
             new Effect.Appear(id,{duration:2.5}); 
             $$("#mosaicdiv #"+idn+" div a").each(function(link) { 
              new Tooltip(link, {mouseFollow: true}); 
             }); 
            }}; 
           new Ajax.Updater(id,'index.php?act=grpic',oOptions); 
          }}); 
        }, interval); 
       }); 
      } 

      var i; 
      for(i=1;i<16;i++) 
       startAnim(i); 

//index.php?act=grpic 
if($_GET['act']==="grpic") { 
      $ar = DisplayFeaturedMembers(1); 
      $img = $ar[1]['image']; 
      $link = $ar[1]['link']; 
      $title = ucfirst($ar[1]['username']).", ".$ar[1]['age'].", ".$ar[1]['country']."<br />".ucfirst($ar[1]['headline']); 
      echo "<a title=\"$title\" href=\"$link\"><img width=\"100px\" height=\"100px\" src=\"$img\"/></a>"; 
      return; 
     } 

它的工作原理，但服务器的负载百分比立即上升。上面的代码有什么问题？或者我应该组成js数组并处理它？如果是这样，你能提供一小段代码吗？

非常感谢！

Answer 1

这看起来比它需要的更复杂。我不熟悉prototype.js，我认为这是你正在使用的。但看看PeriodicalExecuter的文档，它是一个围绕setInterval的包装。我想你可能会误解为setTimeout。 setInterval不会停止，它会继续前进，直到您清除它。

您正在为15个div的每个div创建15个PeriodicalExecuter实例。无论间隔是多少，这就是225个电话！

我不太确定你想要完成什么。这是什么看起来像苹果的专辑艺术屏保？