我们上面看到的图片其实以一个个URL的形式存储在数组中的，当我们点击开始按钮之后，利用一个定时循环器循环生成一个随机数，随机数的范围是0~len(数组)-1。之后获取到该下标的数组中的图片链接，让其显示在小相框中，循环的时间我们可以自己设定。当我们点击了停止按钮之后，让定时循环器停止，读取当前随机生成的数字，并且将该下标下的图片显示在大相框。

当我们再次点击开始的时候，可以重新启动定时循环器，重复上面的步骤。同时我们还要设置，在点击了开始按钮之后，开始按钮就不能够再点击，只能点击停止按钮；点击了停止按钮之后停止按钮就不能再点击，只能点击开始按钮；

接下来我们就来将上面的思路进行实现。

实现部分主要分为两大部分，一部分是开始按钮点击之后实现的动作事件，另一个是点击停止按钮之后实现的动作事件。

二、定义存放图片URL的数组

首先我们需要先找到要作为抽奖选项的图片，将其URL存放到字符数组中，以便之后访问。

// 添加所有循环的图片的url
        var imgArr = ["../img/man00.jpg",
            "../img/man01.jpg",
            "../img/man02.jpg",
            "../img/man03.jpg",
            "../img/man04.jpg",
            "../img/man05.jpg",
            "../img/man06.jpg"
        ];

三、设置开始按钮动作事件

在我们确定好要循环的素材之后，第二步就是点击开始按钮的事件了，在开始按钮的点击事件中，要执行的动作是启动一个定时器，生成一个随机数，小相框中显示图片。

1、设置点击监听

首先我们应该为开始按钮设置一个点击响应的函数。在其中写入相应的触发事件。

// 点击开始按钮
$("#startID").click(function () {
});

2、设置开始按钮失效

在我们点击了开始按钮之后，设置只能点击停止按钮，同时这个时候开始按钮是无法点击的，该设置是disabled属性决定的，属性为true时，按钮无法点击；属性为false时，按钮可以点击。在这里我们使用设置元素属性的prop方法对其的disabled属性进行设置。

// 设置开始按钮和停止按钮可用不可用
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);

3、定义循环定时器

在jquery中设置循环定时器的方法是使用：setInterval()方法，该方法传入两个参数，第一个参数是一个将要执行的方法体，第二个参数是一个循环时间，单位是ms，表示每隔多少秒循环一次。如下的定义表示每20ms循环一次。

setInterval()方法具有一个返回值，该返回值可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

在该方法中我们使用Math的random()方法来生成一个随机数，由于该方法生成的数的范围是0~0.99，所以我们将其乘以7，得到的随机数范围就是0~6；

// 设置一个循环定时器，循环20毫秒
intervalNum = setInterval(function () {
    // 得到1~6的随机数
    index = Math.floor(Math.random()*7);
},20);

4、切换小相框的src属性

当我们生成随机数之后，通过该随机数获取到存放在数组中的图片的url，之后将该URL设置给显示图片的组件。

// 点击开始按钮
$("#startID").click(function () {

    // 设置开始按钮和停止按钮可用不可用
    $("#startID").prop("disabled",true);
    $("#stopID").prop("disabled",false);

    // 设置一个循环定时器，循环20毫秒
    intervalNum = setInterval(function () {
        // 得到1~6的随机数
        index = Math.floor(Math.random()*7);
        // 将小相框的src属性设置成图片链接
        $("#img1ID").prop("src",imgArr[index]);
    },20);
});

至此，开始按钮的点击事件就已将完成了，现在点击开始按钮，就能够显示小相框中图片的滚动，但是点击停止按钮并不会有事件响应，接下来我们来设置停止按钮的响应事件。

四、设置结束按钮动作事件

1、为结束按钮设置监听函数

设置停止按钮的监听函数，在点击了响应的按钮之后，会触发其中的响应事件。

// 点击停止按钮
$("#stopID").click(function () {
});

2、设置停止按钮失效

同时我们需要将停止按钮设置成不可点击，将开始按钮设置为可点击，同样是对disabled属性进行设置。

// 设置开始按钮和停止按钮可用不可用
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);

3、停止定时器

在我们点击在停止按钮之后，就需要将循环定时器停止，否则它还将会继续运行下去，设置计时器停止的方法是clearInterval()，其中传入的参数是开始按钮返回的值，

// 停止循环计时器
clearInterval(intervalNum);

4、给大相框设置src属性

因为我们在开始按钮的事件中就已经随机的生成了图片的URL下标，所以我们在设置大相框的图片时，直接使用该下标就可以了！利用prop方法修改图片的src为随机生成的图片的URL，

// 点击停止按钮
$("#stopID").click(function () {

    // 设置开始按钮和停止按钮可用不可用
    $("#startID").prop("disabled",false);
    $("#stopID").prop("disabled",true);

    // 停止循环计时器
    clearInterval(intervalNum);
    $("#img2ID").prop("src",imgArr[index]);
});

到这里，结束按钮的响应事件就也已经实现了，现在再点击开始和停止按钮就可以实现完整的抽奖系统了，

最后将其整合成完整源码，快来抽取你喜欢的学妹吧！

（其中用到的图片需要大家根据需要自行添加）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script language="JavaScript" type="text/javascript">
        // 添加所有循环的图片的url
        var imgArr = ["../img/man00.jpg",
            "../img/man01.jpg",
            "../img/man02.jpg",
            "../img/man03.jpg",
            "../img/man04.jpg",
            "../img/man05.jpg",
            "../img/man06.jpg"
        ];
        var index;      // 定义一个抽奖的随机数字
        var intervalNum;    //接收定时器的当前状态值

        $(function () {

            // 设置开始按钮和停止按钮可用不可用
            $("#startID").prop("disabled",false);
            $("#stopID").prop("disabled",true);


            // 点击开始按钮
            $("#startID").click(function () {

                // 设置开始按钮和停止按钮可用不可用
                $("#startID").prop("disabled",true);
                $("#stopID").prop("disabled",false);

                // 设置一个循环定时器，循环20毫秒
                intervalNum = setInterval(function () {
                    // 得到1~6的随机数
                    index = Math.floor(Math.random()*7);
                    // 将小相框的src属性设置成图片链接
                    $("#img1ID").prop("src",imgArr[index]);
                },20);
            });
            
            // 点击停止按钮
            $("#stopID").click(function () {

                // 设置开始按钮和停止按钮可用不可用
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);

                // 停止循环计时器
                clearInterval(intervalNum);
                $("#img2ID").prop("src",imgArr[index]);
            });
        });


    </script>
</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div
        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div>

<!-- 开始按钮 -->
<input
        id="startID"
        type="button"
        value="点击开始"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStart()">

<!-- 停止按钮 -->
<input
        id="stopID"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStop()">

</body>
</html>

有问题的小伙伴记得在评论区或者私信留言！

我是灰小猿！我们下期见！

以上是关于五分钟学会做一个在线抽奖系统，手把手教你抽奖还学不会嘛？的主要内容，如果未能解决你的问题，请参考以下文章

手把手教你实现一个抽奖系统（Java版）

实现一个在线抽奖系统，就算是个小白看了也能做出来（附源码）

如何设计一个可以电脑随机抽奖程序