JavaScript to achieve window display effect

* {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 190px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        
        ul {
            list-style: none;
            display: flex;
        }
        
        ul img {
            vertical-align: top;
        }
        
        .progress {
            width: 100%;
            height: 30px;
            background: #ccc;
        }
        
        .progress>.line {
            width: 100px;
            height: 100%;
            background: orange;
            border-radius: 15px;
 }

<div class="box">
        <ul>
            <li>
                <img src="images/img1.jpg" alt="">
            </li>
            <li>
                <img src="images/img2.jpg" alt="">
            </li>
            <li>
                <img src="images/img3.jpg" alt="">
            </li>
            <li>
                <img src="images/img4.jpg" alt="">
            </li>
            <li>
                <img src="images/img5.jpg" alt="">
            </li>
            <li>
                <img src="images/img6.jpg" alt="">
            </li>
            <li>
                <img src="images/img7.jpg" alt="">
            </li>
            <li>
                <img src="images/img8.jpg" alt="">
            </li>
            <li>
                <img src="images/img9.jpg" alt="">
            </li>
            <li>
                <img src="images/img10.jpg" alt="">
            </li>
        </ul>
        <div class="progress">
            <div class="line"></div>
        </div>
</div>

 .box {
           overflow: hidden;
        }
        
        ul {
            position: relative;
        }
        
        .progress {
            position: relative;
        }
        
        .progress>.line {
            position: absolute;
            left: 0;
            top: 0;
  }

//1. Get the element to be operated const oUl = document.querySelector("ul");
const oItems = oUl.querySelectorAll("li");
const oProgress = document.querySelector(".progress");
const oLine = document.querySelector(".line");
const oBox = document.querySelector(".box");
 
//2. Calculate the width of ul const ulWidth = oItems[0].offsetWidth * oItems.length;
 
//3. Set the width of ul oUl.style.width = ulWidth + 'px';
 
//4. Calculate the width of the scroll bar // Scroll bar width / scroll bar scroll range = container width / content range const progressWidth = oProgress.offsetWidth;
const boxWidth = oBox.offsetWidth;
const lineWidth = boxWidth / ulWidth * progressWidth;
 
//5. Set the scroll bar width oLine.style.width = lineWidth + 'px';
// Calculate the maximum scrolling range of the scroll bar const maxLineX = progressWidth - lineWidth;
// Calculate the maximum scrollable range of the image const maxImgX = boxWidth - ulWidth;
 
 //6. Listen for mouse pressed events oLine.onmousedown = function(e) {

e = e || window.e;
//a. Get the current position of the scroll bar let begin = parseFloat(oLine.style.left) || 0;
 
//b. Get the position where the mouse is pressed in the scroll bar let mouseX = e.pageX - oBox.offsetLeft;
 
//7. Listen for mouse movement events oLine.onmousemove = function(e) {
e = e || window.e;
//c. Get the position of the mouse after moving in the scroll bar let moveMouseX = e.pageX - oBox.offsetLeft;
 
//d. Calculate the offset let offsetX = moveMouseX - mouseX + begin;
 
//e. Safety check offsetX = offsetX < 0 ? 0 : offsetX;
offsetX = offsetX > maxLineX ? maxLineX : offsetX;
 
 //f. Reset the scroll bar position oLine.style.left = offsetX + 'px';
 
//g. Calculate the scrolling distance of the image // Scroll bar scrolling distance / scroll bar maximum scrolling range = image scrolling distance / image maximum scrolling range // Scroll bar scrolling distance / scroll bar maximum scrolling range * image maximum scrolling range = image scrolling distance const imgOffsetX = offsetX / maxLineX * maxImgX;
 
// h. Reset the image position oUl.style.left = imgOffsetX + "px";
            };
        };
        document.onmouseup = function() {
            oLine.onmousemove = null;
}