javascript - 如何使图像从左侧 0,0 位置向右滑动到右侧末端？

Question

我有这个代码:

   <script type="text/javascript">
      var animate, left=0, imgObj=null;

function init(){

   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'absolute';
   imgObj.style.top = '240px';
   imgObj.style.left = '-300px';
   imgObj.style.visibility='hidden';

   moveRight();
}

function moveRight(){
    left = parseInt(imgObj.style.left, 10);
    if (10 >= left) {
        imgObj.style.left = (left + 5) + 'px';
        imgObj.style.visibility='visible';

        animate = setTimeout(function(){moveRight();},20);

    } else {
        stop();
    }
}

function stop(){
   clearTimeout(animate);
}

window.onload = function() {init();};
   </script>
<img id="myImage" src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" style="margin-left:170px;" />

它所做的是将屏幕中间的一张图像从左侧移动到中心。 但我想要它做的是将图像从左上角 0,0 移动到右侧的末端到右上边界而不是停止但图像将再次从右到右移动离开了。

我一直不明白这个 px 值。现在它设置为前 240 和左 -300。我试图将它更改为 0 和 0，但它没有将它放在左上角，而且图像根本没有移动。

我如何更改代码，以便它开始将图像从左上角移动到右上角，我如何添加更多图像，以便它像幻灯片一样从左到右不停地移动它们？

Answer 1

试试这个:

<script>
    var animate, left=0, imgObj=null, right;

    function init(){

       imgObj = document.getElementById('myImage');
       imgObj.style.position= 'absolute';
       imgObj.style.top = 0;
       imgObj.style.left = 0;
       imgObj.style.visibility='visible';

       right = document.documentElement.clientWidth - imgObj.width;
       moveRight();

    }

    function moveRight(){
        if (left < right) {
            left += 5;
            imgObj.style.left = Math.min(left, right) + 'px';

            animate = setTimeout(moveRight,20); // call moveRight in 20msec
        }
    }

    window.onload = init;
</script>
<img id="myImage" src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" />

DEMO

现在回答您的第二个问题:

how can i add more images so it will move them nonstop from left to right like slide ?

您只需更改一点代码，即可处理多个图像:

<script>
    var imgObjs=null;

    function init(){
       imgObjs = document.getElementsByTagName('img');
        for(var i = imgObjs.length; i--; ) {
           var imgObj = imgObjs[i];
           imgObj.style.position='absolute';
           imgObj.style.top = 0;
           imgObj.style.display='none';        
        }

       moveImage(0);
    }

    function moveImage(i) {
        var imgObj = imgObjs[i],
            right = document.documentElement.clientWidth - imgObj.width;

        left = imgObj.style.left = 0;
        imgObj.style.display='block';

        function moveRight(){
            if (left < right) {
                left += 5;
                imgObj.style.left = Math.min(left, right) + 'px';

                setTimeout(moveRight,20); // call moveRight in 20msec
            } else {
                imgObj.style.display='none';
                moveImage((i+1)%imgObjs.length);
            }
        }
        moveRight();
    }

    window.onload = init;
</script>
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007337.Gif" />
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007338.Gif" />
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" />

DEMO