0

似乎是一个非常小众的问题，但它就在这里。

我有一个需要连续循环的图像滚动器。一切都运行得很好，除了实际的动画直到第二次迭代才运行。

<?php $images = scandir("Images/scroller"); ?>
var images = new Array();
images = <?php echo json_encode($images); ?>;
var i = 0;
function newImg(){
    if(i == images.length){
        i = 2;
    }

    var currentPicWidth = $("#wide").children().first().width() * -1;
    $("#wide").children().first().animate({'marginLeft': currentPicWidth}, 3200, "linear", function(){
        $("#wide").append("<img src='Images/scroller/" + images[i] + "' name='" + i + "' class='imgScroll'>\n").children().first().remove();
        i++;
        window.newImg();
    });
}
.
.
.
<div id="imageScroller">
    <div id="wide">
        <?php
            for($i = 2; $i < 10; $i++){
                echo "<img src='Images/scroller/" . $images[$i] . "' name='" . $i . "' class='imgScroll'>";
            }
        ?>
    </div>
</div>
.
.
.

<script type="text/javascript">
    $(document).ready(initPage(), newImg());
</script>

因此，由于我的动画是环保的，并且会根据需要丢弃/创建新元素，因此发生的情况是 3.2 秒内没有动画运行，然后第一张图像被丢弃并开始动画。

有什么巧妙的修复吗？

4

1 回答 1

1

您提供的语法是从原始脚本中删除的，但这不是问题问题是 $(document).ready() Ready 在收到所有元素后执行，但未完全加载（我的意思是在屏幕上呈现）。所以在准备好的时候你不能像你一样访问像图像宽度这样的元素的css属性如果你第一次提醒宽度它将为零另一种选择是

<body onload="newImg()"> ... </body> it will work

或 jquery 方法

$(window).bind("load",newImg);

请注意，在 jquery 中有加载的快捷方式

$(window).load(newImg); But it's deprecated in version 1.8
于 2013-07-08T06:46:12.233 回答