JQuery 图片循环播放抽奖

最新推荐文章于 2021-01-26 11:43:27 发布

_七七

最新推荐文章于 2021-01-26 11:43:27 发布

阅读量408

点赞数

分类专栏： JQuery 文章标签： js javascript jquery html

本文链接：https://blog.csdn.net/qq_43472877/article/details/106793734

版权

JQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

开始按钮：

定义循环定时器
切换小相框的src属性
定义数组，存放图片资源路径
生成随机数，数组索引

结束按钮：

停止计时器
给大相框设置src属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <style>
        img{
            width: 100%;
            height: 100%;
        }

    </style>
    <script>

        var imgs = ["1.jpeg",
                    "2.jpeg",
                    "3.jpeg"];
        
        var startid;
        var index;
        $(function () {
            //设置按钮是否可以使用效果
            $("#start").prop("disabled",false);
            $("#end").prop("disabled",true);
            //开始按钮
            $("#start").click(function () {

                $("#start").prop("disabled",true);
                $("#end").prop("disabled",false);

                //循环计时器 20毫秒执行一次
                startid = setInterval(function () {
                    //生成随机角标
                    index = Math.floor(Math.random()*3);
                    //设置小相框src属性
                    $("#img1").prop("src",imgs[index]);
                },20)
            })

            //结束按钮
            $("#end").click(function () {
                $("#start").prop("disabled",false);
                $("#end").prop("disabled",true);

                //结束定时器
                clearInterval(startid);
                $("#img2").prop("src",imgs[index]).hide();
                $("#img2").show(1000);
            })
        })
    </script>

</head>
<body>
<!--预览小框-->
    <div id="simg" style="height: 300px;width: 400px ;border:1px solid black;margin-top: 100px" >
        <img src="1.jpeg" id="img1">
    </div>
<!--结果大框-->
    <div id="bimg" style="height: 600px;width: 800px ;border:1px solid black;position: absolute;left: 500px;top: 50px">
        <img src="1.jpeg" id="img2">
    </div>
<!--开始按钮-->
    <input id="start" type="button" value="开始抽奖" style="height: 100px;width: 150px;">
<!--停止按钮-->
    <input id="end" type="button" value="停止抽奖" style="height: 100px;width: 150px;">
</body>
</html>