蓝桥杯18582-真人鉴定器
介绍
真人鉴定功能是一种常见的网络安全措施，用于保护网站免受机器人或自动化程序的恶意攻击。该功能基于人类视觉能力，要求用户在访问网站时通过切换右边轮播图，识别与左边要求的图片个数相符的图片，并点击“提交”按钮进行验证。
准备
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
├── css
├── images
├── effect.gif
├── index.html
└── js└── index.js
其中：
css是样式文件夹。images是图片文件夹。effect.gif是最终效果图。index.html是主页面。js/index.js是待补充的代码 js 文件。
在浏览器中预览 index.html 页面效果如下：
目标
本题需修复验证码功能，使用户可以正常切换右边轮播图。找到 js/index.js 文件中的 changeBanner 函数，完善其中的 TODO 部分，目标如下：
该函数接收一个参数 isPre（布尔值）区分当前点击的按钮。点击上一页/下一页时修改全局变量 thisIndex（即图片的索引）正确显示对应的图片，共四张图片。
- 点击 “←”（
id=pre）按钮时，isPre为true，轮播图切换到上一页。若当前轮播图为第一页，则切换到最后一页（即第四页）。 - 点击 “→”（
id=next）按钮时，isPre为false，轮播图切换到下一页。若当前轮播图为最后一页（即第四页），则切换到第一页。
解题
index.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>真人鉴定器</title><link rel="stylesheet" href="./css/style.css"></head><body><div class="main"><p class="error">验证失败，请在右侧更换后重新提交！</p><h2>使用箭头来更换物体的数量，使其与左图相同。</h2><div class="content"><div class="left"><span id="num">2</span><span>X</span><img id="leftStar" src="./images/flower.svg" alt="" srcset=""></div><div class="right"><div class="banner"><ul class="imgList"><li><img src="./images/flower.svg" alt=""><img src="./images/flower.svg" alt=""><img src="./images/flower.svg" alt=""></li><li><img src="./images/flower.svg" alt=""></li><li><img src="./images/flower.svg" alt=""><img src="./images/flower.svg" alt=""></li><li><img src="./images/flower.svg" alt=""><img src="./images/flower.svg" alt=""><img src="./images/flower.svg" alt=""><img src="./images/flower.svg" alt=""></li></ul><div class="circle"></div><div class="toolbar"><div id="pre"><img src="./images/left_arrow.svg" alt=""></div><div id="next"><img src="./images/right_arrow.svg" alt=""></div></div></div></div></div><button class="btn">提交</button></div></body><script src="./js/index.js"></script>
</html>
//inedx.js
window.onload = function () {var imgList = document.querySelector(".imgList");var circle = document.querySelector(".circle");var thisIndex = 0;var imgListLi = imgList.children;var circleA = circle.children;var flag = true;imgList.style.width = imgList.children.length * 300 + "px";/*** 轮播图切换* @param {*} isPre 是否上一页：true 上一页，false 下一页。*/function changeBanner(isPre) {// TODO：待补充代码if(isPre==true)thisIndex!=0?thisIndex--:thisIndex=3;}if(isPre==false){thisIndex!=3?thisIndex++:thisIndex=0;}// TODO: ENDif (flag) {flag = false;slow(imgList, -thisIndex * 300, function () {flag = true;});circleChange();}}for (var i = 0; i < imgList.children.length; i++) {var aNode = document.createElement("a");aNode.setAttribute("index", i); //设置自定义属性if (i == 0) {aNode.className = "hover";}circle.appendChild(aNode);}circle.addEventListener("click", function (e) {if (flag) {flag = false;if (e.target.nodeName != "A") {return false;}thisIndex = e.target.getAttribute("index");slow(imgList, -thisIndex * 300, function () {flag = true;});circleChange();}});document.querySelector("#pre").addEventListener("click", function () {changeBanner(true);});document.querySelector("#next").addEventListener("click", function () {changeBanner(false);});setImgStyle();document.querySelector(".btn").addEventListener("click", function () {const num = parseInt(document.querySelector("#num").innerText);if (imgListLi[thisIndex].children.length == num) {document.querySelector(".main").innerHTML = `<div class="success"><img src="./images/success.svg" alt=""><h2>验证完成！</h2><p>您已经证明您是人类。请继续操作。</p></div>`;} else {document.querySelector(".error").style = "opacity: 1;";}});// 设置图片的样式function setImgStyle() {var numEl = document.querySelector("#num");var fontSize = Math.floor(Math.random() * 10 + 20);var numElAngle = Math.floor(Math.random() * 60 - 30);numEl.style = `font-size:${fontSize}px;transform: rotate(${numElAngle}deg);-moz-transform: rotate(${numElAngle}deg);-webkit-transform: rotate(${numElAngle}deg);-o-transform: rotate(${numElAngle}deg)`;var photo = document.querySelectorAll(".imgList img");for (var i = 0; i < photo.length; i++) {var width = Math.floor(Math.random() * 100 + 40);var left = Math.floor(Math.random() * 760 + 40);var top = Math.floor(Math.random() * 400);var angle = Math.floor(Math.random() * 60 - 30);let s = `left:${left}px;width:${width}px;top :${top}px;transform: rotate(${angle}deg);-moz-transform: rotate(${angle}deg);-webkit-transform: rotate(${angle}deg);-o-transform: rotate(${angle}deg)`;photo[i].style = s;}}/*** 分页器样式切换*/function circleChange() {for (var i = 0; i < circleA.length; i++) {circleA[i].className = "";}circleA[thisIndex].className = "hover";}/*** 轮播图位置移动* @param {*} obj * @param {*} target * @param {*} callback */function slow(obj, target, callback) {obj.myInter = setInterval(function () {var offsetLeft = obj.offsetLeft;var num = (target - offsetLeft) / 10;num > 0 ? (num = Math.ceil(num)) : (num = Math.floor(num));if (offsetLeft == target) {clearInterval(obj.myInter);callback && callback();} else {obj.style.left = offsetLeft + num + "px";}}, 10);}
};
