<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="verify.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/verify.js"></script>
</head>
<body>
<div id="demo"></div>
<script>
$("#demo").slideVerify({
type: 2, //类型
vOffset: 5, //误差量，根据需求自行调整
vSpace: 5, //间隔
imgName: ["1.jpg", "2.jpg"],// 填写需要的图片
imgSize: {
width: "400px",
height: "200px",
},
blockSize: {
width: "40px",
height: "40px",
},
barSize: {
width: "400px",
height: "40px",
},
ready: function () {
alert('刚开始执行')
},
success: function () {
alert("验证成功，添加你自己的代码！");
},
error: function () {
alert('哈哈哈哈，错了！')
},
});
</script>
</body>
</html>
具体参考这个链接，写的相当好：https://www.html5tricks.com/demo/jquery-front-end-verify/index.html
需要引入verify.js和verify.css(下附下载地址):
https://blog-static.cnblogs.com/files/lyt520/verify.js
https://blog-static.cnblogs.com/files/lyt520/verify.css