How does JS achieve simple carousel image special effects? (Detailed explanation with pictures and texts)

Code Introduce MyTools.js library 1.html > 2.css *{margin: 0;padding: 0 ;} a { color: #999; text-decoration: none; position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, .4); } a:hover { color: #f8b62b; } i { font-size: 50px; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; } #box{ height: 482px; width: 830px; background-color: red; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden; } #box_content{ height: 100%; width: 100%; cursor: pointer; } #box_content img{ position: absolute; vertical-align: top; height: 100%; width: 100%; /*left: 830px;*/ } .box_img{ width: 100%; height: 100%; position: absolute;} .box_control_right{ position: absolute; right: 0; } .box_control_left{ position: absolute; left: 0; } ul{ position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-evenly; } ul>li { list-style: none; width: 16px; height: 16px; background-color: #fff; margin: 0 3px; border-radius: 50%; cursor: pointer; } ul>li.current{ background-color: darkorange; } 3.js window.addEventListener('load', function (ev) { // carousel (function () { // 1. Get the required label var boxCOntent = myTool. $(& # 39; box_content & # 39;); var cOntentImg = boxContent.children; var boxCOntrol = myTool. $(& # 39; box_control & # 39;); var cOntrolBottom = boxControl. children[2]; // 2. Global index var iNow = 0; // 3. Dynamically add the picture…