JavaScript zum Erzielen eines Fensteranzeigeeffekts

* {
            Rand: 0;
            Polsterung: 0;
        }
        
        .Kasten {
            Breite: 800px;
            Höhe: 190px;
            Rand: 1px durchgezogen #000;
            Rand: 100px automatisch;
        }
        
        ul {
            Listenstil: keiner;
            Anzeige: Flex;
        }
        
        ul img {
            vertikale Ausrichtung: oben;
        }
        
        .Fortschritt {
            Breite: 100 %;
            Höhe: 30px;
            Hintergrund: #ccc;
        }
        
        .Fortschritt>.Zeile {
            Breite: 100px;
            Höhe: 100%;
            Hintergrund: orange;
            Rahmenradius: 15px;
 }

<div Klasse="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 Klasse="Fortschritt">
            <div Klasse="Zeile"></div>
        </div>
</div>

 .Kasten {
           Überlauf: versteckt;
        }
        
        ul {
            Position: relativ;
        }
        
        .Fortschritt {
            Position: relativ;
        }
        
        .Fortschritt>.Zeile {
            Position: absolut;
            links: 0;
            oben: 0;
  }

//1. Das zu bearbeitende Element abrufen 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. Berechnen Sie die Breite von ul const ulWidth = oItems[0].offsetWidth * oItems.length;
 
//3. Legen Sie die Breite von ul fest oUl.style.width = ulWidth + 'px';
 
//4. Breite der Bildlaufleiste berechnen // Breite der Bildlaufleiste / Bildlaufbereich der Bildlaufleiste = Containerbreite / Inhaltsbereich const progressWidth = oProgress.offsetWidth;
const boxWidth = oBox.offsetWidth;
const Zeilenbreite = Kastenbreite / Zeilenbreite * Fortschrittsbreite;
 
//5. Breite der Bildlaufleiste festlegen oLine.style.width = lineWidth + 'px';
// Maximalen Bildlaufbereich der Bildlaufleiste berechnen const maxLineX = progressWidth - lineWidth;
// Berechnen Sie den maximal scrollbaren Bereich des Bildes const maxImgX = boxWidth - ulWidth;
 
 //6. Auf Mausklick-Ereignisse warten oLine.onmousedown = function(e) {

e = e || Fenster.e;
//a. Aktuelle Position der Bildlaufleiste abrufen let begin = parseFloat(oLine.style.left) || 0;
 
//b. Holen Sie sich die Position, an der die Maus in der Bildlaufleiste gedrückt wird. let mouseX = e.pageX - oBox.offsetLeft;
 
//7. Auf Mausbewegungsereignisse warten oLine.onmousemove = function(e) {
e = e || Fenster.e;
//c. Position der Maus nach dem Bewegen in der Bildlaufleiste abrufen let moveMouseX = e.pageX - oBox.offsetLeft;
 
//d. Berechnen Sie den Offset. let offsetX = moveMouseX - mouseX + begin;
 
//e. Sicherheitsüberprüfung offsetX = offsetX < 0 ? 0 : offsetX;
offsetX = offsetX > maxZeileX ? maxZeileX : offsetX;
 
 //f. Position der Bildlaufleiste zurücksetzen oLine.style.left = offsetX + 'px';
 
//g. Scroll-Distanz des Bildes berechnen // Scroll-Distanz der Bildlaufleiste / maximaler Scroll-Bereich der Bildlaufleiste = Scroll-Distanz des Bildes / maximaler Scroll-Bereich des Bildes // Scroll-Distanz der Bildlaufleiste / maximaler Scroll-Bereich der Bildlaufleiste * maximaler Scroll-Bereich des Bildes = Scroll-Distanz des Bildes const imgOffsetX = offsetX / maxLineX * maxImgX;
 
// h. Bildposition zurücksetzen oUl.style.left = imgOffsetX + "px";
            };
        };
        Dokument.onmouseup = Funktion() {
            oLine.onmousemove = null;
}