如何讓圖像從左側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>