Question

我有一个包含4行和7列的表。在每个td我放置了一个链接（a）与三个随机图像（由PHP创建没有问题:)）。想法是在每个td中无限地淡化和淡化三个图像。此外，循环的时间必须在单元之间不同。 Tha图像应该在不同时间改变，而不是同时改变所有时间。我认为我可以用JQuery实现这个目标，但是我一直在网上寻找它而没有结果。当只有一个循环时，我可以找到解决方案，但是当你同时拥有这么多不同的循环时，你又能怎么做呢？

HTML：

<table>
<tbody>
<tr>
    <td><a href="#" class="casella"><img src="" /><img src="" /><img src="" /></a></td>
    <td><a href="#" class="casella"><img src="" /><img src="" /><img src="" /></a></td>
    ...till 7 columns
</tr>
<tr... till 4 rows
</tbody>
</table>

CSS：

a.casella {position:relative;} 
a.casella img{position: absolute; left:0; top:0; display:none; z-index:-1; width:120px; height:120px}

Answer 1

我明白了！我只是在表格之后插入了这段代码。

var min=3000;
            var max=8000;
            var transMult=0.4;
            var currIdx = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
            var i=0;
            function animateBG(i) {
                    currIdx[i]=(currIdx[i] < 2) ? currIdx[i] +1 : 0;
                    displayTime=Math.random()*(max-min)+min;
                    setTimeout(function() {
                        transitionTime=Math.floor(displayTime*transMult);
                        $("td a").eq(i).children("img").css('z-index',1);
                        $("td a").eq(i).children("img").eq(currIdx[i]).css('z-index', 2).fadeIn(transitionTime, function() {
                        $("td a").eq(i).children("img").not(this).hide();
                        animateBG(i);
                        });
                    }, displayTime)
            }
            $(window).load(function()
                {
                    for(j=0;j<24;j++)
                    {
                        animateBG(j);
                    }
               });

在不同时间的表格的不同单元格中循环不同的图像

1 个答案: