<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body><!--小图--><div style="background-color:red;border: dotted; height: 50px; width: 50px"><img src="../img/01.jpg" id="smallImg" style="width: 50px; height: 50px;"></div><!--大图--><div id="bigimgdiv" style="border: double ;width: 500px; height: 500px; position: absolute; left: 500px; top:10px"><img id="bigImg" src="#" style="width: 500px; height: 500px"></div><!--开始按钮--><input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始" onclick="Imgstart()"><input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止" onclick="ImgsStop()"></body>
<script>$(function () {$("#bigimgdiv").hide();});var imgs =new Array();for(var i=0;i<13;i++){if (i<9){imgs[i]="../img/0"+(i+1)+".jpg"}else {imgs[i]="../img/"+(i+1)+".jpg"}}var count = 0;var total= imgs.length;var timeId = null; function chageImage(){timeId = window.setInterval(function(){count = count%total; var img = imgs[count]; $("#smallImg").prop("src",img).show();count++;},10)}function Imgstart(){chageImage();$("#startBtn").prop("disabled",true); $("#stopBtn").prop("disabled",false); $("#bigimgdiv").hide();}function ImgsStop(){window.clearInterval(timeId);$("#startBtn").prop("disabled",false);$("#stopBtn").prop("disabled",true);var img = imgs[--count%total];$("#bigimgdiv").show(300);$("#bigImg").prop("src",img).hide();$("#bigImg").delay(300).show(300);}
</script>
</html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
