用戶控件不適用於圖像循環

-1

我已經在循環功能內嘗試過它，但它說該功能沒有被使用，所以我把它放在外面仍然沒有工作，我不知道如何解決它，因爲我認爲這將工作，請記住JavaScript的第一天，感謝提前的幫助，請不要jQuery。用戶控件不適用於圖像循環

<html> 
    <head> 
     <style type="text/css"> 
      #PictureContainer { 
       height: 300px; 
       width: 500px; 
       margin: 0 auto; 
       overflow: hidden; 
       display: inline-block; 
      } 

      #SliderWrapper { 
       width: 628px; 
       height: 300px; 
       margin: 0 auto; 
       overflow: hidden; 
      } 

      #image { 
       height: 300px; 
       width: 500px; 
      } 

      #Next { 
       float: right; 
      } 

      #Before { 
       float: left; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="SliderWrapper"> 
      <a href="#" onclick="Forward(); return false;"><img id="Next" src="Forward.png" alt="Forward"></a> 
      <a href="#" onclick="Back(); return false;"><img id="Before" src="Back.png" alt="Back"></a> 
      <div id="PictureContainer"> 
       <img id="image" src="html.png" alt="HTML"> 
      </div> 
     </div> 

     <script language="javascript" type="text/javascript"> 

      var i = 1; 

      function loop() { 
       i = i+1; 
        if(i == 5){ 
         i = 1; 
        } 
       if (i == 1) { 
        document.getElementById('image').src = "html.png"; 
       } else if(i == 2) { 
        document.getElementById('image').src = "css3.png"; 
       } else if (i == 3) { 
        document.getElementById('image').src = "WebdevLogo's.jpg"; 
       } else { 
        document.getElementById('image').src = "WebdevLogo's.jpg"; 
       } 


      } 
       var pictureloop = setInterval(loop, 3000); 

      function Forward() { 
       if(i == 5) { 
        i = 1; 
       } else { 
        i = i+1; 
       } 
      } 

      function Back() { 
       if(i == 1) { 
        i = 4; 
       } else { 
        i = -1; 
       } 
      } 

     </script> 

    </body> 
</html>

來源

2014-02-18 Tom

確切的錯誤是什麼？ –

正向和反向函數不能正常工作，它們應該使循環前後移動一張圖片。 – Tom

你有一個叫loop的函數，但是你永遠不會調用它，所以它永遠不會改變圖像的source屬性。在前向和後向函數中，在末尾添加對循環函數的調用。我已經修復了Back（）內部的一些問題。

function Forward() { 
      if(i == 5) { 
       i = 1; 
      } else { 
       i++; 
      } 
      loop(); 
     } 

     function Back() { 
      if(i == 1) { 
       i = 5; 
      } else { 
       i--; 
      } 
      loop(); 
     }

內環路（）函數，可以考慮使用switch block代替所有的其他IFS的。同樣在循環函數中，使用增量運算符 - i ++; - 將值增加1，而不是手動語句i = i + 1;另外，如果我== 5語句是多餘的。您已經在轉發功能中擁有它。

來源

2014-02-18 18:28:13 larsAnders

謝謝我所要做的就是把循環（）放在函數中感謝您的幫助。 – Tom

沒問題。請仔細看看Sonic Soul的答案。這很好。與此同時，如果你能接受我的答案，那會很好。 – larsAnders

它的工作原理，但不是去向前或向後的圖片它走2我想這是與循環在同一時間運行？ – Tom

這是https://codereview.stackexchange.com/的更多問題，但這裏有幾件事會使代碼更清晰。

而不是複製圖像設置代碼，聲明一個圖像數組。

var images = ['img1.png','img2.png']; 
var currentImage = 0; 

function forward() { 
    currentImage++; 
    if (currentImage > images.length-1) currentImage == 0; 
    setImage() 
} 

function setImage() { 
    document.getElementById('image').src = images[currentImage]; 
} 

setInterval(forward, 5000);

來源

2014-02-18 18:33:19

感謝您的幫助，雖然我沒有使用你說的感謝嘗試，因爲我不是很瞭解這一點。 – Tom

唯一的區別是添加的數組。否則它與你的代碼「currentImage」代替「i」一樣。 –

用戶控件不適用於圖像循環

回答

相關問題