0

かなりニッチな質問のようですが、ここまでです。

連続ループにする必要がある画像スクローラーがあります。実際のアニメーションが 2 回目の反復まで実行されないことを除いて、すべてが正常に実行されます。

<?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).read() Ready です。したがって、準備ができているので、画像の幅のような要素のcssプロパティにアクセスすることはできませんそして、最初に幅を警告した場合、それはゼロになります

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

またはjqueryメソッド

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

jquery には load のショートカットがあることに注意してください

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