我制作了一个随机显示图像的图片库
现在我只能为下一个图像创建一个按钮，但我还需要为上一个图像创建一个后退按钮
我使用 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>这应该对你有用。 您必须有一个数组来跟踪您的历史记录。然后向后退时将结果弹出。
我更改了一些函数名称，这样更容易看出它是什么。我还删除了 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>