Question

似乎是一个非常小众的问题，但现在就这样了。

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

<?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秒没有动画运行然后第一个图像被删除并且动画开始。

任何聪明的修复？

Answer 1

您提供的语法是从原始脚本中删除的，但这不是问题问题是$（document）.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

动画直到第二个循环才会运行

1 个答案: