如何：为随机图像显示器创建JavaScript动画

我创建了两个函数，用JavaScript显示随机图像。一个用于随机图像，另一个用于无重复的随机图像。现在我正试图用它制作一个Slotsgame旋转器，但每次只能使用一个图像。

下面是一个slotsgame的示例：

所以，现在我正在尝试设置Math.Random函数的动画，以便您看到所有定义的图像在调用图像的div中旋转

HTML代码：

<form name="imageForm">
<table border=3>
    <tr>
        <td>
            <input onclick="displayImage();" type="button" value="Display Random Image">
            <input onclick="displayImageND();" type="button" value="Display Random Image Without Duplicates">
        </td>
    </tr>
    <tr>
        <td>
            <img src="img/image1.jpg" name="canvas" id="canvas" />
        </td>
    </tr>
</table>

var imagesArray = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg"];
var gen_nums = [];

function in_array(array, el) {
    for(var i = 0 ; i < array.length; i++)
        if(array[i] == el) return true;
    return false;
}

function displayImage(){
    var num = Math.floor(Math.random() * 8);
    document.canvas.src = 'img/'+ imagesArray[num];
}

function displayImageND(){
    var num = Math.floor(Math.random() * 8);
    if(!in_array(gen_nums, num)) {
        gen_nums.push(num);
        return document.canvas.src = 'img/'+ imagesArray[num];
    }
    return displayImageND();
}

图像将显示在第二个

中

JavaScript代码：

<form name="imageForm">
<table border=3>
    <tr>
        <td>
            <input onclick="displayImage();" type="button" value="Display Random Image">
            <input onclick="displayImageND();" type="button" value="Display Random Image Without Duplicates">
        </td>
    </tr>
    <tr>
        <td>
            <img src="img/image1.jpg" name="canvas" id="canvas" />
        </td>
    </tr>
</table>

var imagesArray = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg"];
var gen_nums = [];

function in_array(array, el) {
    for(var i = 0 ; i < array.length; i++)
        if(array[i] == el) return true;
    return false;
}

function displayImage(){
    var num = Math.floor(Math.random() * 8);
    document.canvas.src = 'img/'+ imagesArray[num];
}

function displayImageND(){
    var num = Math.floor(Math.random() * 8);
    if(!in_array(gen_nums, num)) {
        gen_nums.push(num);
        return document.canvas.src = 'img/'+ imagesArray[num];
    }
    return displayImageND();
}

var-imagesArray=[“image1.jpg”、“image2.jpg”、“image3.jpg”、“image4.jpg”、“image5.jpg”、“image6.jpg”、“image7.jpg”、“image8.jpg”]；
var gen_nums=[]；
_数组中的函数（数组，el）{
对于（var i=0；i

我对JavaScript非常陌生，这是我第一个使用它的“项目”。也许你只是笑着读我的问题，没关系；）。但我在谷歌上搜索了很多，似乎找不到适合我的解决方案。请帮帮我

编辑：

<form name="imageForm">
<table border=3>
    <tr>
        <td>
            <input onclick="displayImage();" type="button" value="Display Random Image">
            <input onclick="displayImageND();" type="button" value="Display Random Image Without Duplicates">
        </td>
    </tr>
    <tr>
        <td>
            <img src="img/image1.jpg" name="canvas" id="canvas" />
        </td>
    </tr>
</table>

var imagesArray = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg"];
var gen_nums = [];

function in_array(array, el) {
    for(var i = 0 ; i < array.length; i++)
        if(array[i] == el) return true;
    return false;
}

function displayImage(){
    var num = Math.floor(Math.random() * 8);
    document.canvas.src = 'img/'+ imagesArray[num];
}

function displayImageND(){
    var num = Math.floor(Math.random() * 8);
    if(!in_array(gen_nums, num)) {
        gen_nums.push(num);
        return document.canvas.src = 'img/'+ imagesArray[num];
    }
    return displayImageND();
}

我不想看到的是一个图像向下滑动，而下一个图像在随机设定的时间内滑动。每张图片都会包含一个问题或类似的问题。所以，当你点击一个随机图像的按钮时，它必须像旋转的卷轴一样旋转，并在一个有问题的图像上随机结束。我试着在自己的代码中加入一些我可以在网上找到的例子。 像这个： 但由于缺乏JavaScript知识，我无法让它工作

---

我希望这次编辑能更清楚地说明我的问题。

对于任何阅读您的代码（包括将来的您！）的人来说，使用“canvas”这个名称作为目标可能会让人困惑；有一个问题。看到

document.canvas

可能会让人觉得你是在用

canvas

而不是普通的图像标签做事情。你说的“动画”和“旋转”是什么意思？您是只想随着时间的推移更改当前显示的图像（相对容易），还是希望一个图像向下滑动，而下一个图像在其上方滑动，就像一个旋转的卷轴一样（要做的事情要多得多）。你想让它“旋转”一段时间吗？在一定数量的图像后停止？更详细地了解您希望它如何工作将有助于任何人回答这个问题。就目前而言，它有点模糊，无法为您指出正确的方向。你已经试过了吗？如果是什么？@UselessCode谢谢你的回答。我已经编辑了我的问题（请参阅我文章底部的编辑部分），我希望这会有所帮助。对于任何阅读你的代码的人（包括将来的你！），使用“canvas”这个名称作为目标可能会让人困惑；有一个问题。看到

document.canvas

可能会让人觉得你是在用

canvas

而不是普通的图像标签做事情。你说的“动画”和“旋转”是什么意思？您是只想随着时间的推移更改当前显示的图像（相对容易），还是希望一个图像向下滑动，而下一个图像在其上方滑动，就像一个旋转的卷轴一样（要做的事情要多得多）。你想让它“旋转”一段时间吗？在一定数量的图像后停止？更详细地了解您希望它如何工作将有助于任何人回答这个问题。就目前而言，它有点模糊，无法为您指出正确的方向。你已经试过了吗？如果是什么？@UselessCode谢谢你的回答。我已经编辑了我的问题（见我文章底部的编辑部分），我希望这会有所帮助。