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

Question

我创建了两个用JavaScript显示随机图像的功能。一个用于随机图像，一个用于无重复的随机图像。现在我试图用它来制作一个Slotsgame微调器，但当时只有一个图像。

下面是一个老虎机游戏的例子：

所以，现在我试图为Math.Random函数设置动画，这样你就可以看到在调用图像的div中旋转的所有已定义图像。

HTML code：

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

图像将显示在第二个<td>。

中

JavaScript代码：

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的新手，这是我的第一个＆＃34;项目＆＃34;使用它。所以也许你只是笑着读我的问题，那没关系;）。但我已经搜索了很多东西，似乎无法为我找到合适的解决方案。请帮帮我。

修改

我想要的是，一个图像向下滑动，而下一个图像随机滑动一段时间。每张图片都会包含一个类似的问题。因此，当您单击随机图像的按钮时，它必须像旋转卷轴一样旋转并随机结束有问题的图像。我试图在网上找到一些可以在我自己的代码中找到的例子。 像这样：http://jsfiddle.net/ZDsMa/1/ 但由于我缺乏JavaScript知识，我无法让它发挥作用。

我希望这次编辑更能澄清我的问题。