Question

我在tympanus看到了一个教程，我做了一些修改，看起来更像是一个广告牌，但有些不对劲，我不知道它是什么！它真的让我疯狂到底哪里有问题！第一次你运行它正是我想要的，但是当时间过去它变得丑陋！我做了这个修改：

$(function() {
$('#ad_1 > img').each(function(i,e){
    rotate($(this),500,3000,i);
});
function rotate(elem1,speed,timeout,i){
    elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
        var other;
        if(elem1.parent().attr('id') == 'ad_1')
            other = $('#ad_2').children('img').eq(i);
        else
            other = $('#ad_1').children('img').eq(i);
            other.animate({'marginLeft':'0px','width':'35px'},speed,function(){
            var f = function() { rotate(other,speed,timeout,i) };
            setTimeout(f,timeout+i*100);
        });
    });
}});

所有其余的就像tympanus 谢谢!!

Answer 1

在不查看其余代码的情况下很难判断，但是你的else语句缺少括号。我想你打算这样做：

$(function() {
$('#ad_1 > img').each(function(i,e){
    rotate($(this),500,3000,i);
});
function rotate(elem1,speed,timeout,i){
    elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
        var other;
        if(elem1.parent().attr('id') == 'ad_1') {
            other = $('#ad_2').children('img').eq(i);
        } else {
            other = $('#ad_1').children('img').eq(i);
            other.animate({'marginLeft':'0px','width':'35px'},speed,function(){
            var f = function() { rotate(other,speed,timeout,i) };
            setTimeout(f,timeout+i*100);
        });
       }
    });
}});

*编辑：你还记得包含jQuery吗？

<script src="jquery-1.3.2.js" type="text/javascript"></script>

Answer 2

将来，您将有助于描述您希望实现的，而不是将其留给您正在寻求帮助以便自己解决问题的人。随着一些摆弄，我确定你想要的是，而不是每个面板同时动画，动画从左到右稍微延迟，以便每个面板开始动画在其左邻居之后已经开始动画了。

您试图通过在面板的旋转之间添加的持续时间来实现此目的。作为面板索引的函数计算的增量对于更高的索引更大。这种方法的问题在于每个面板在其显示状态下花费不同的持续时间 - 随着时间的推移，整个图像变得越来越严重。

面板都需要具有相同的显示持续时间，因此请将更改还原为setTimeout。

setTimeout(f, timeout);

您实际想要做的是在每个面板开始旋转时延迟。这可以通过在启动轮换的setTimeout处理程序中添加each来实现：

$('#ad_1 > img').each(function (i, e) { setTimeout($.proxy(function () { rotate($(this), 500, 7000, i); }, this), (i * 100)); });

您会注意到我已经增加了传递给timeout的{{1}}值，因为需要更多时间来容纳顺序动画。

我还建议您付出一些努力来更好地格式化代码。您的样本由于压痕不足，间距不足以及省略花括号，使得阅读它成为一件苦差事。

用jquery创建广告牌幻灯片

2 个答案: