在html中旋轉圖像

大家好，我試圖讓這些圖像在HTML中每5秒旋轉一次，使用javascript。我弄不明白爲什麼圖像不旋轉，如果有人可以幫助我，這將是偉大的！謝謝。在html中旋轉圖像

<!DOCTYPE html> 
<html> 

<head> 

<title>Concert Ads</title> 

<script type="text/javascript"> 

var image1=new Image() 
image1.src="concert1.gif" 

var image2=new Image() 
image2.src="concert2.gif" 

var image3=new Image() 
image3.src="concert3.gif" 

var image4=new Image() 
image4.src="concert4.gif" 

var image5=new Image() 
image5.src="concert5.gif" 


</script> 

</head> 

<body> 

<img src="concert1.gif" name="slide" > 

<script type="text/javascript"> 


var step=1 
function slideit() { 
document.images.slide.src=eval("image"+step+".src") 

if(step<5) 

step++ 

else 

step=1 

setTimeout("slideit()",5000) 

slideit() 

</script> 

</body> 


</html>

來源

2013-10-25 user2863675

你的setTimeout函數不正確，因爲你是傳遞一個字符串，而不是一個功能，你不關閉功能。每次創建新的圖像項目也是非常低效的;一個數組將適合你更好。最後，我想你想使用setInterval而不是setTimeout。

工作示例是在這裏：http://jsfiddle.net/HUP5W/2

顯然，圖像不工作，但是，如果你看一下控制檯，它工作正常。

var image = document.getElementById("img1"); 
var src = ["concert2.gif","concert3.gif","concert4.gif","concert5.gif","concert1.gif"]; 

var step=0 
    function slideit() { 
     image.src = src[step]; 
     image.alt = src[step]; 
     if(step<4) { 
      step++; 
     } else { 
      step=0; 
     } 
    }   
    setInterval(slideit,5000);

來源

2013-10-25 13:48:24

或'的setTimeout（slideit，5000）' – putvande

感謝您的幫助！ – user2863675

沒問題我只是在示例中做了一個小修改來解決索引問題，如果它解決了你的問題，不要忘記標記爲已回答並祝你好運。 –

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script type="text/javascript"> 
     var image1 = new Image() 
     image1.src = "dummyImg1.jpg" 

     var image2 = new Image() 
     image2.src = "dummyImg2.jpg" 

     var image3 = new Image() 
     image3.src = "dummyImg3.png" 
    </script> 
</head> 
<body> 
    <img src="dummyImg1.jpg" name="slide" > 
    <script type="text/javascript"> 
     var step = 1 
     function slideit() { 
      document.images["slide"].src = eval("image" + step + ".src") 
      if (step < 3) 
       step++ 
      else 
       step = 1 
      setTimeout("slideit()", 5000) 
     } 
     slideit() 
    </script> 
</body> 
</html>

來源

2013-10-25 13:56:57

感謝您的幫助！ – user2863675

爲什麼這個downvote？這是一個工作演示（Firefox 24.0/Linux）。 –

因爲你沒有給出解釋，所以只是堅持代碼並不能幫助任何人解決問題。你也setTimout在你的功能，所以將循環3次instanatly，而不能參考slideit。請參閱http://jsfiddle.net/L4bTX/1/ –

在html中旋轉圖像

回答

相關問題