javascript - 自动更改图像

Question

哎呀，你们好吗？ 我遇到了一个问题 - 我有一个网站，有一个名为“mosaicdiv”的 div。该 div 包含带有 links-images() 的子 div。我希望这些图像和链接能够随机更改为数据库中的其他图像和链接。所以，我尝试用ajax来完成它:

<?  $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 中的每一个创建 15 个 periodicalexecutor 实例。无论间隔是多少，这都是 225 个调用!

我不太确定你想要实现什么目标。这看起来像苹果的专辑封面屏幕保护程序吗？