<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jquery案例之抽奖</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></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()"><script language='javascript' 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" ]; /* * 分析： * 1、给开始按钮绑定单击事件 * 1.1、定义循环定时器 * 1.2、切换小相框src属性 * *定义一个数组，存放图片存放路径 * *生成随机数，数组索引 * * 2、给结束按钮绑定单击事件 * 2.1、清空定时器 * 2.2、给大相框设置src属性 * * */ $(function () { var index; var interval; $("#startID").prop("disabled",false); $("#stopID").prop("disabled",true); // 1、给开始按钮绑定单击事件 $("#startID").click(function () { // 1.1、定义循环定时器,20毫米循环一次 interval = setInterval(function () { //1.2、生成随机角标0~6 index= Math.floor(Math.random()*7); //1.3、设置小相框src属性 $("#img1ID").prop("src",imgs[index]); },20); $("#startID").prop("disabled",true); $("#stopID").prop("disabled",false); }); // 2、给结束按钮绑定单击事件 $("#stopID").click(function () { clearInterval(interval); $("#img2ID").prop("src",imgs[index]); $("#startID").prop("disabled",false); $("#stopID").prop("disabled",true); }); });</script></body></html>
来源：https://www.cnblogs.com/newcityboy/p/11524931.html