爱站程序员基地一、目的
当点击开始按钮，小相框中的图片随机循环出现。
当点击停止按钮，大相框中展示出的是小相框中停止时的图片。
二、分析
-
给开始按钮绑定单击事件
1.1 定义循环定时器
1.2 切换小相框的src属性
* 定义数组，存放图片资源路径
* 生成随机数。数组索引2. 给结束按钮绑定单击事件1.1 停止定时器1.2 给大相框设置src属性
三、实现代码
<!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><!-- 大像框 --><divstyle=\"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><!-- 开始按钮 --><inputid=\"startID\"type=\"button\"value=\"点击开始\"style=\"width:150px;height:150px;font-size:22px\"onclick=\"imgStart()\"><!-- 停止按钮 --><inputid=\"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\"];$(function(){//1.开始让停止按钮 处于失效状态;开始按钮处于可以点击状态$(\"#startID\").prop(\"disabled\",false);$(\"#stopID\").prop(\"disabled\",true);//2.给开始按钮绑定单击事件function imgStart(){$(\"#startID\").prop(\"disabled\",true);$(\"#stopID\").prop(\"disabled\",false);//定义一个循环定时器 让它在规定的时间内不断播放图片timeout = setInterval(function(){//2.1生成随机整数 作为图片的下标值 *7再向下取整index = Math.floor(Math.random()*7);//2.2给小相框修改src资源 imgs是一个数组 index是下标值$(\"#img1ID\").prop(\"src\",imgs[index]);},30);};//3.给停止按钮绑定单击事件function imgStop(){//点击停止按钮 开始按钮有效 停止按钮无效$(\"#startID\").prop(\"disabled\",false);$(\"#stopID\").prop(\"disabled\",true);//定时器停下 清除定时器clearTimeout(timeout);//修改大相框中属性src的值等于小相框中属性src的值$(\"#img2ID\").prop(\"src\",imgs[index]);}});</script></body></html>
