需要幫助隨機生成的照片庫創建後退按鈕

現在我只能夠創造下一個按鈕，但我需要一個後退按鈕也爲之前的圖像

我用JavaScript顯示隨機圖像，現在我只能生成下一個圖像。但我不能爲顯示先前生成的圖像後退按鈕請幫感謝

<html> 
 
<head> 
 
<title>Image list</title> 
 
<form name="imageForm"> 
 
    <table border=3> 
 
    <tr align="center"> 
 
    <td> 
 
     <input onclick="var temp = displayImage();displaynum(); return temp;" type=button value="Click Here"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <img src="http://i.imgur.com/xBwug66.jpg" name="canvas" /> 
 
    </td> 
 
    </tr> 
 
    </table> 
 
</form> 
 
<script language="javascript"> 
 

 
var imagesArray = [ 
 
'http://i.imgur.com/aOBAdcS.jpg', 
 
'http://i.imgur.com/f40kyc3.jpg', 
 
'http://i.imgur.com/oM9MlZN.jpg', 
 
'http://i.imgur.com/iCqIdVP.jpg', 
 
'http://i.imgur.com/wfjPTaL.jpg', 
 
'http://i.imgur.com/BInZqYM.jpg', 
 
'http://i.imgur.com/SQAUhGN.jpg', 
 
'http://i.imgur.com/zjzaS7C.jpg', 
 
'http://i.imgur.com/y2qtX0G.jpg', 
 
'http://i.imgur.com/dguKz5P.jpg', 
 
]; 
 

 
var usedImages = {}; 
 
var usedImagesCount = 0; 
 

 

 
function displayImage(){ 
 

 
    var num = Math.floor(Math.random() * (imagesArray.length)); 
 
    if (!usedImages[num]){ 
 
     document.canvas.src = imagesArray[num]; 
 
     usedImages[num] = true; 
 
     if (usedImagesCount === imagesArray.length){ 
 
      usedImagesCount = 0; 
 
      usedImages = {}; 
 
     } 
 
    } else { 
 
     displayImage(); 
 
\t \t displaynum(); 
 
    } 
 
\t 
 

 
} 
 

 

 

 
</script> 
 
</html>

來源

2017-03-03 Rafi RedDragon

您會考慮使用瀏覽器的後退按鈕？如果是這樣，您可以更改每個圖像的URL的散列（＃）部分，然後瀏覽器會記住您的訂單。 –

感謝您的評論，但很抱歉。我想要一個顯示以前生成的圖像的按鈕 –

我真的是一個noob。你能告訴我如何改變散列嗎？我想嘗試 –

這應該爲你做的伎倆。你必須有一個數組來跟蹤你的歷史。然後在倒退時彈出結果。

我已經更改了一些函數名稱，這樣可以更容易地告訴它是什麼。我也刪除了displayNum（），因爲你沒有在源代碼中使用它。

var imagesArray = [ 
 
    'http://i.imgur.com/aOBAdcS.jpg', 
 
    'http://i.imgur.com/f40kyc3.jpg', 
 
    'http://i.imgur.com/oM9MlZN.jpg', 
 
    'http://i.imgur.com/iCqIdVP.jpg', 
 
    'http://i.imgur.com/wfjPTaL.jpg', 
 
    'http://i.imgur.com/BInZqYM.jpg', 
 
    'http://i.imgur.com/SQAUhGN.jpg', 
 
    'http://i.imgur.com/zjzaS7C.jpg', 
 
    'http://i.imgur.com/y2qtX0G.jpg', 
 
    'http://i.imgur.com/dguKz5P.jpg', 
 
    ]; 
 

 
var usedImages = {}; 
 
var usedImagesCount = 0; 
 
var numHistory = []; 
 

 
function displayPreviousImage(){ 
 
    if (numHistory.length > 1){ 
 
     numHistory.pop(); 
 
     var num = numHistory[numHistory.length-1]; 
 
     document.canvas.src = imagesArray[num]; 
 
    } 
 
} 
 

 
function displayNextImage(){ 
 

 
    var num = Math.floor(Math.random() * (imagesArray.length)); 
 
    if (!usedImages[num]){ 
 
     numHistory.push(num); 
 
     document.canvas.src = imagesArray[num]; 
 
     usedImages[num] = true; 
 
     if (usedImagesCount === imagesArray.length){ 
 
      usedImagesCount = 0; 
 
      usedImages = {}; 
 
     } 
 
    } else { 
 
     displayNextImage(); 
 
    } 
 
}

<form name="imageForm"> 
 
    <table border="3"> 
 
    <tr align="center"> 
 
    <td> 
 
     <input onclick="var tempPrev = displayPreviousImage(); return tempPrev;" type=button value="Previous">   
 
     <input onclick="var tempNext = displayNextImage(); return tempNext;" type=button value="Next"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <img src="http://i.imgur.com/xBwug66.jpg" name="canvas" /> 
 
    </td> 
 
    </tr> 
 
    </table> 
 
</form>

來源

2017-03-03 15:49:00 MrAmazing

感謝的人。這就是我想要的 –

當然！很高興這是你需要的。您可能想要對您實際呈現數據的方式進行一點處理。你可以直接從函數中完成。你只需要有onclick =「displayPreviousImage（）」等。 – MrAmazing

兄弟我有你的代碼中的錯誤。我附上了一個計數器來計算已經生成了多少圖像並檢測到了這個bug。問題是如果我按下後退按鈕，它不會顯示所有圖像https://jsfiddle.net/15pd2ptv/ –

需要幫助隨機生成的照片庫創建後退按鈕

回答

相關問題