Question

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

现在我只能为下一个创建一个按钮，但我还需要一个后退按钮，用于以前的图像

我使用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>

Answer 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>

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

1 个答案: