JQuery makes a small program for random call and lottery

First look at the effect:

At first, "click to start" is enabled, "click to stop" button is disabled;
click: "click to start" button, "click to start" button is disabled, "click to stop" button is enabled, the upper left corner picture starts to switch;
click: "click to stop" After the "button, the "click to start" is enabled, and the "click to stop" button is disabled; at the same time, the upper left picture stops switching, and the big picture on the right shows the picture in the upper left corner.
Insert picture description here

Note: To use this program, you need to import the JQuery framework

#### Webpage code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖程序</title>
    <style type="text/css">
        #small {
     
     
            border: 1px solid blueviolet;
            width: 75px;
            height: 75px;
            margin-bottom: 20px;
        }

        #smallPhoto {
     
     
            width: 75px;
            height: 75px;
        }

        #big {
     
     
            border: 2px solid orangered;
            width: 500px;
            height: 500px;
            position: absolute;
            left: 300px;
            top: 10px
        }

        #bigPhoto {
     
     
            width: 500px;
            height: 500px;
        }

        #btnStart {
     
     
            width: 100px;
            height: 100px;
            font-size: 22px;
        }

        #btnStop {
     
     
            width: 100px;
            height: 100px;
            font-size: 22px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!-- 小像框 -->
<div id="small">
    <img id="smallPhoto" src="img/man00.jpg"/>
</div>

<!-- 大像框 -->
<div id="big">
    <img id="bigPhoto" src="img/man00.jpg"/>
</div>

<!-- 开始按钮 -->
<input id="btnStart" type="button" value="点击开始">

<!-- 停止按钮 -->
<input id="btnStop" type="button" value="点击停止" disabled="disabled">


<script type="text/javascript">
    //准备一个一维数组，用户的图片的路径
    var imgs = [
        "img/man00.jpg",
        "img/man01.jpg",
        "img/man02.jpg",
        "img/man03.jpg",
        "img/man04.jpg",
        "img/man05.jpg",
        "img/man06.jpg"
    ];

    // 索引号
    var  num = 0;

    var timer;//计时器
    // 开始按钮
    $("#btnStart").click(function () {
     
     
    	//1. 点开始按钮，切换2个按钮的状态，一个可用，一个不可用
        $(this).prop("disabled",true);//不可用
        $("#btnStop").prop("disabled",false);//可用
        //2. 不停的修改smallPhoto的src
        //参数1：被调用的函数  参数2：过多久，毫秒。返回值就是计时器
        timer = setInterval(function () {
     
     
        	//小图片
            $("#smallPhoto").attr("src",imgs[num]);
            num++;
            //判断如果num = 数组的长度，设置num=0
            if (num == imgs.length) {
     
     
                num = 0;
            }
        },100);
    });

    // 停止按钮
    $("#btnStop").click(function () {
     
     
    	//1. 切换按钮的状态
        $("#btnStart").attr("disabled",false);
        $("#btnStop").attr("disabled",true);

        // 图片停止转换   清除计时器
        clearInterval(timer);
        // 将小图片 src 的地址赋值给大图片
        $("#bigPhoto").attr("src",$("#smallPhoto").attr("src"));
        // 使用动画
        $("#bigPhoto").hide();  //隐藏
        // 淡出
        $("#bigPhoto").fadeIn(3000);    // 时间
    });

</script>

</body>
</html>

JQuery makes a small program for random call and lottery

First look at the effect:

Guess you like