Implementieren einer benutzerdefinierten Bildlaufleiste mit nativem JS

<div id="div">
 <div id="div1">
 <div id="div2"> </div>
 </div>
 <div id="div3">
 <div id="div4">
 <p>CSS3-Anleitung</p>
 <p>CSS3-Anleitung</p>
 <p>Einführung in CSS3</p>
 <p>CSS3-Rahmen</p>
 <p>CSS3 abgerundete Ecken</p>
 <p>CSS3-Hintergrund</p>
 <p>CSS3-Farbverläufe</p>
 <p>CSS3-Texteffekte</p>
 <p>CSS3-Schriftarten</p>
 <p>CSS3 2D-Transformationen</p>
 CSS3 3D-Transformationen
 <p>CSS3-Übergänge</p>
 <p>CSS3-Animation</p>
 <p>CSS3 Mehrere Spalten</p>
 <p>CSS3-Benutzeroberfläche</p>
 <p>CSS3-Bilder</p>
 <p>CSS3-Schaltfläche</p>
 <p>CSS3-Seitennummerierung</p>
 <p>CSS3-Boxgröße</p>
 <p>Flexible CSS3-Box</p>
 <p>CSS3-Multimediaabfragen</p>
 <p>Beispiel für eine CSS3-Multimediaabfrage</p>
 </div>
 </div>
</div>

*{Polsterung: 0; Rand: 0;}
#div{oben:200px;links:25%;Breite: 50%;Höhe: 300px; Position: absolut; 
}
#div1{Breite: 20px; Höhe: 300px; Position: relativ; 
Hintergrund: #CCCCCC; Rahmenradius: 28px; Float: rechts; Cursor: Zeiger;}
#div1 #div2{links: -4px;Breite: 28px;Höhe: 28px;Randradius: 50%; Hintergrund: rot;
position: absolut;}

#div3{Breite: 90%; Höhe: 300px; Rahmen: 2px durchgezogen #CCCCCC;
Position: relativ; Float: links; Überlauf: versteckt;}
#div3 #div4{oben:0;links:0;Breite: 100 %; Position: absolut; Schriftfamilie: „Microsoft YaHei“;
Schriftgröße: 19px; Buchstabenabstand: 1px; Polsterung: 3px 6px;}

fenster.onload = funktion(){
 var allDiv = document.getElementById('div');
 var oDiv = document.getElementById('div2');
 var aDiv = document.getElementById('div1');
 var textDiv1 = document.getElementById('div3');
 var textDiv2 = document.getElementById('div4');
 
 // Der Fortschrittsbalken wird gezogen und der Inhalt folgt dem Bewegungsereignis oDiv.onmousedown = function (ev) {
 var oEvent =ev||Ereignis;
 
 var disY =oEvent.clientY -oDiv.offsetTop;
 
 wenn (oDiv.setCapture) {
 oDiv.onmousemove = Mausbewegung;
 oDiv.onmouseup = Maus hoch;
 
 oDiv.setCapture();
 }anders{
 document.onmousemove = Mausbewegung;
 Dokument.onmouseup = Maus hoch;
 }
 
 Funktion Mausbewegung(ev){
 var oEvent =ev||Ereignis; 
 var t =oEvent.clientY -disY; 
 var bottomLine = aDiv.OffsetHeight - oDiv.OffsetHeight; 
 
 
 wenn(t < 0){
 t =0;
 }sonst wenn(t >bottomLine){
 t = unterste Zeile;
 }
 
  var Prozent =t/272;
  
 oDiv.style.top = t+'px';
 textDiv2.style.top = - (textDiv2.offsetHeight-textDiv1.offsetHeight) * Prozent + "px";
 
 };
 
 Funktion Maus nach oben () {
 dies.onmousemove =null;
 dies.onmouseup =null;
 
 wenn (oDiv.releaseCapture) {
 oDiv.releaseCapture();
 }
 };
 
 gibt false zurück;
 };
 
 // Klicken Sie auf den Fortschrittsbalken, um den Timer zu starten. Wenn der Ball das Ziel mit konstanter Geschwindigkeit erreicht, löschen Sie den Timer aDiv.onmousedown=function(ev){
 var oEvent =ev||Ereignis; 
 var divY =oEvent.clientY-allDiv.offsetTop;
 var Timer = null; var Geschwindigkeit = 10;
 
 
 Intervall löschen(Timer)
 Timer = Intervall festlegen(Funktion(){
 var Prozent=oDiv.offsetTop/272;
 
 
 wenn(oDiv.offsetTop<divY-28){
 oDiv.style.top = oDiv.offsetTop + Geschwindigkeit + 'px';
 textDiv2.style.top = -(textDiv2.offsetHeight-textDiv1.offsetHeight)*Prozent + 'px';
 }sonst wenn(oDiv.offsetTop>divY){
 oDiv.style.top = oDiv.offsetTop – Geschwindigkeit + „px“;
 textDiv2.style.top = -(textDiv2.offsetHeight-textDiv1.offsetHeight)*Prozent + 'px';
 }sonst wenn(oDiv.offsetTop>260){
 oDiv.offsetTop = 272+'px';
 Intervall löschen(Timer);
 }sonst wenn(oDiv.offsetTop<10){
 oDiv.offsetTop = 0+'px';
 Intervall löschen(Timer);
 }anders{
 Intervall löschen(Timer);
 }
 
 
 },10);
 
 }
 
}