需求：
点击开始按钮，在小镜框中图片开始随机切换，点击停止按钮后，图片停止切换，并且在大镜框中显示出来
重要是图片显示出来,使用的prop()方法里面的src属性，因为是固有属性
其他逻辑比较简单
$("#img2ID").prop(“src”,imgs[i]);
<!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" ]; var i; var startId; $(function () { $("#startID").click(function () { //在小镜像里面开始切换图片 //具体应该设置一个定时器，每一秒切换一张 startId = setInterval(function() { // //处理按钮是否可以使用的效果 // $("#startID").prop("disabled",true); // $("#stopID").prop("disabled",false); i = Math.floor(Math.random() * 7); $("#img1ID").prop("src",imgs[i]); },30); }); $("#stopID").click(function () { //停止切换，并且在大镜像中显示该图片 clearInterval(startId); $("#img2ID").prop("src",imgs[i]); }); }); </script> </body> </html>
