1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery案例之抽奖</title> 6 <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> 7 <script> 8 /* 9 1.点击开始按钮 10 绑定点击事件，事件处理中进行小图中的图片切换，改变src的值，需要一定时间就换图片， 11 用定时器，循环定时器，循环切换 12 2.图片开始切换 13 14 3.点击停止按钮，图片停止切换，并且在大图中显示小图中的图片。 15 给停止绑定点击事件，事件处理中，关闭定时器，修改大图的src等于小图中的src。 16 */ 17 //准备一个一维数组，装用户的像片路径 18 var imgs = [ 19 "../img/man00.jpg", 20 "../img/man01.jpg", 21 "../img/man02.jpg", 22 "../img/man03.jpg", 23 "../img/man04.jpg", 24 "../img/man05.jpg", 25 "../img/man06.jpg" 26 ]; 27 28 function startBtnEnable(flag){ 29 $("#startID").prop("disabled", !flag); 30 $("#stopID").prop("disabled", flag); 31 }; 32 33 var imgTimer; 34 var rIndex; 35 36 $(function () { 37 startBtnEnable(true); 38 }); 39 40 function imgStart(){ 41 //点击开始后就不能再点击了，可以点击停止 42 startBtnEnable(false); 43 // $("#startID").prop("disabled", true); 44 // $("#stopID").prop("disabled", false); 45 46 imgTimer = setInterval(function(){ 47 //随机切换图片 48 rIndex = Math.floor(Math.random() * 7); 49 $("#img1ID").prop("src", imgs[rIndex]); 50 }, 200); 51 } 52 53 function imgStop(){ 54 //点击结束后就不能再点击了，可以点击开始 55 startBtnEnable(true); 56 // $("#startID").prop("disabled", false); 57 // $("#stopID").prop("disabled", true); 58 //清除定时 59 clearInterval(imgTimer); 60 //将大相框的图片设置的和小相框的图片一致 61 $("#img2ID").prop("src", imgs[rIndex]); 62 //大相框的图片显示出显示的效果 63 $("#img2ID").hide(); 64 $("#img2ID").show("normal", "swing"); 65 } 66 </script> 67 </head> 68 <body> 69 70 <!-- 小像框 --> 71 <div style="border-style:dotted;160px;height:100px"> 72 <img id="img1ID" src="../img/man00.jpg" style="160px;height:100px"/> 73 </div> 74 75 <!-- 大像框 --> 76 <div 77 style="border-style:double;800px;height:500px;position:absolute;left:500px;top:10px"> 78 <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/> 79 </div> 80 81 <!-- 开始按钮 --> 82 <input 83 id="startID" 84 type="button" 85 value="点击开始" 86 style="150px;height:150px;font-size:22px" 87 onclick="imgStart()"> 88 89 <!-- 停止按钮 --> 90 <input 91 id="stopID" 92 type="button" 93 value="点击停止" 94 style="150px;height:150px;font-size:22px" 95 onclick="imgStop()"> 96 97 <script language='javascript' type='text/javascript'> 98 99 </script> 100 </body> 101 </html>
