需要帮助在随机生成照片库中创建后退按钮答案

【问题标题】：Need help creating Back button in random generate photo gallery需要帮助在随机生成照片库中创建后退按钮
【发布时间】：2017-07-23 17:44:44
【问题描述】：

我制作了一个随机显示图片的图片库

现在我只能为下一张图片创建一个按钮，但我还需要为上一张图片创建一个后退按钮

我使用 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();
		displaynum();
    }
	

}



</script>
</html>

【问题讨论】：

您会考虑使用浏览器的后退按钮吗？如果是这样，您可以更改每张图片的 URL 的井号 (#) 部分，然后浏览器会为您记住顺序。
感谢您的评论，但很抱歉。我想要一个显示以前生成的图像的按钮
我真的是个菜鸟。你能告诉我如何改变哈希？我想试试

标签： javascript html random numbers solution

【解决方案1】：

这应该可以为您解决问题。你必须有一个数组来跟踪你的历史。然后在你倒退的时候弹出结果。

我已经更改了一些函数名称，以便更容易分辨它是什么。我还删除了 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>

【讨论】：

当然！很高兴这就是你所需要的。您可能需要对实际呈现数据的方式进行一些研究。您可以直接从函数中执行此操作。您只需要 onclick="displayPreviousImage()" 等。
兄弟，我的代码中有一个错误。我附加了一个计数器来计算已生成的图像数量并检测到错误。问题是如果我按下后退按钮它不会显示所有图像jsfiddle.net/15pd2ptv