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

结合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>

Answer 2

尝试这个：

<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" />

演示

现在，您的第二个问题是 ：

如何添加更多图像，以便像幻灯片一样将它们从左到右不停地移动？

您只需要更改一点代码，就可以处理多个图像：

<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" />

演示