jQuery实现广告自动显示与隐藏及抽奖图片轮播-优快云博客

本文链接：https://blog.youkuaiyun.com/DAIMAZHUANG/article/details/130162882

img

(广告图片、抽奖用到的图片)

js

jquery-3.6.1.js

jquery-migrate-1.0.0.js

jquery-migrate-3.4.0.js

suda

广告.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>广告的自动显示与隐藏</title>
    <style>
        #content {
            width: 100%;
            height: 500px;
            background: #999
        }
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.6.1.js"></script>
    <script>
        //入口函数，在页面加载完成之后，定义定时器，调用这两个方法
        $(function() {
            setTimeout(adShow, 3000);
            setTimeout(adHide, 8000);
        })

        function adShow() {
            $("#ad").show("slow");
        }

        function adHide() {
            $("#ad").hide("slow");
        }
    </script>
</head>

<body>
    <!-- 整体的DIV -->
    <div>
        <!-- 广告DIV -->
        <div id="ad" style="display: none;">
            <img style="width:100%" src="../img/adv.jpg" />
        </div>

        <!-- 下方正文部分 -->
        <div id="content">
            正文部分
        </div>
    </div>
</body>

</html>

抽奖.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
    <script type="text/javascript" src="../js/jquery-3.6.1.js"></script>
    <script language='javascript' type='text/javascript'>
    </script>
    <script>
        var imgs = [ //用于存放图片的数组
            "../img/test01.jpeg",
            "../img/test02.jpeg",
            "../img/test03.jpeg",
            "../img/test04.jpeg",
            "../img/test05.jpeg",
            "../img/test06.jpeg",
            "../img/test07.jpeg",
            "../img/test08.jpeg",
            "../img/test09.jpeg",
            "../img/test10.jpeg",
        ];
        //设置两个按键的被点击功能是否有效
        function setRuning(isRun) {
            if (isRun == true) {
                $("#startID").prop("disabled", true);
                $("#stopID").prop("disabled", false);
            } else {
                $("#startID").prop("disabled", false);
                $("#stopID").prop("disabled", true);
            }
        }

        var imgIndex;
        var intervalTimer;
        $(function() {
            //刚加载开始按钮有效，停止按钮无效
            setRuning(false);

            $("#startID").click(function() {
                //点击开始按钮就使开始按钮失效，停止按钮有效
                setRuning(true);

                //1.1 设置周期定时器20ms切换下一幅图
                intervalTimer = setInterval(function(args) { //setInterval方法返回的是设置的周期定时器指针
                    //1.1.1 随机获取图片索引进行显示->获取随机数0.000~0.999 -> 转换为0.0~0.999 -> 向上取整
                    imgIndex = Math.floor(Math.random() * 7);

                    $("#img1ID").prop("src", imgs[imgIndex]);
                }, 20);
            });

            // 停止按钮处理
            $("#stopID").click(function() {
                //点击开始按钮就使开始按钮有效，停止按钮失效
                setRuning(false);

                //停止定时器---让图片不跳动 -》通过前面设置定时器的返回值
                clearInterval(intervalTimer);

                //在大图的位置显示图片 --- 为了达到好的显示效果，先隐藏，然后过1S后显示
                $("#img2ID").prop("src", imgs[imgIndex]).hide();
                $("#img2ID").show(1000);
            });
        });
    </script>

</head>

<body>

    <!-- 小像框 -->
    <div style="border-style:dotted;width:160px;height:100px">
        <img id="img1ID" src="../img/01.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/01.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>