如何使图像从左侧 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

现在你的第二个问题：

我怎样才能添加更多图像，这样它就可以像幻灯片一样从左到右不停地移动它们？

您只需更改一点代码，即可处理多张图片：

<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

Answer 2

结合 javascript 和 css 过渡以获得最佳效果

<style>
    img {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;

        transition-property: left;
        transition-duration: 2s;
    }
</style>

<img src="pic.jpg">

<script>
    function animate() {
        var img = document.getElementsByTagName('img')[0];
        var img_width = 100;
        var window_width = window.innerWidth;
        img.style.left = window_width - img_width;
    }

    function init() {
        setTimeout(animate, 1000);
    }

    window.onload = init();
</script>