HTML+CSS+JavaScript zum Erreichen eines Beispielcodes für das Scrollen in einer Listenschleife

Beschreibung: Stellen Sie einen Timer ein, um den Inhalt des vorherigen Knotens innerhalb der angegebenen Zeit zu ersetzen.
1. Schlüsselcode: Javascript:

Code kopieren

Der Code lautet wie folgt:

<Skripttyp="text/javascript">
var dome = document.getElementById ("dome"); //Holen Sie sich den Knoten
var Kuppel1 = document.getElementById("Kuppel1");
var dome2 = document.getElementById("dome2");
var speed=50; //Stellt die Geschwindigkeit der Aufwärtsrotation ein
dome2.innerHTML=dome1.innerHTML; //Knotenschlüsselanweisungen kopieren
Funktion moveTop(){
if(dome1.offsetHeight-dome.scrollTop<=0){//Beurteilen Sie, ob der Inhalt zum ersten Mal durchlaufen wurde
Kuppel.scrollTop=0;
}anders{
dome.scrollTop++; //Sonst nach oben verschieben
}
}
var myFunction=setInterval("moveTop()",speed);//Timer einstellen
dome.onmouseover=function(){//Maus stoppt, wenn sie im Bereich platziert wird
clearInterval(meineFunktion);
}
Kuppel.onmouseout=Funktion(){
meineFunktion=setInterval(moveTop,speed);
}
</Skript>

2. Codebeispiel: vollständiger Code (ausführbar)

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Kreisförmiger Scroll-Informationsbalken</title>
<style type="text/css">
Körper{
Rand: 0px;
Polsterung: 0px;
}
#express li{
Höhe: 25px;
Rahmen unten: gestrichelt 1px #999;
Zeilenhöhe: 20px;
Schriftgröße: 12px;
Listenstil: keiner;
}
#Kuppel{
Höhe: 305px;
Überlauf: versteckt;
Rand oben: 0px;
}
#Buchklasse{
Breite: 200px;
Höhe: 310px;
Rand: 3px durchgezogen #999;
Rand links: automatisch;
Rand rechts: automatisch;
Rand oben: 70px;
Rahmenradius: 5px 5px 5px 5px;
Boxschatten: 0px 0px 10px 10px #CECED1;
}
#äußern{
Rand links: -30px;
Rand rechts: 10px;
Rand unten: 0px;
Rand oben: 0px;
}
#Buchklasse div div ul li a{
Textdekoration: keine;
Farbe: #333333;
}
#Buchklasse div div ul li a:hover{
Textdekoration: Unterstreichen;
}
</Stil>
</Kopf>
<Text>
<div id="Buchklasse">
<div id="Kuppel">
<div id="Kuppel1">
<ul id="express">
<li><a href="#">·Lehrplan für Englisch als Aufbaustudium 2010 mit 25 % Rabatt eingetroffen...</a></li>
<li><a href="#">·Autoritative Version der Vier großen Klassiker (Volksliteratur...</a></li>
<li><a href="#">·Herr Tang Degang, eine Autorität auf dem Gebiet der mündlichen Überlieferung ...</a></li>
<li><a href="#">·Yuan Weimin und die Sportwelt: Die Wahrheit sagen...</a></li>
<li><a href="#">·Wir in Taiwan haben in den letzten Jahren auf beiden Seiten der Taiwanstraße für Aufsehen gesorgt...</a></li>
<li><a href="#">· Empfohlene Bestseller-Lehrmittel: 50 Sätze exquisiter Bücher...</a></li>
<li><a href="#">·Ausgabe 2010 des gemeinsamen Prüfungsschemas für den Master of Laws 75...</a></li>
<li><a href="#">· 25 % Rabatt auf neue und meistverkaufte Computerbücher</a></li>
<li><a href="#">·Die beliebtesten Kinderbücher 2009</a></li>
<li><a href="#">·59 % Rabatt auf ausgewählte Werke von Freud</a></li>

</div>
<div id="Kuppel2"></div>
</div>
</div>

<Skripttyp="text/javascript">
var Kuppel = document.getElementById("Kuppel");
var Kuppel1 = document.getElementById("Kuppel1");
var dome2 = document.getElementById("dome2");
var speed=50; //Stellt die Geschwindigkeit der Aufwärtsrotation ein
dome2.innerHTML=dome1.innerHTML; //Knoten kopieren
Funktion moveTop(){
wenn(Kuppel1.OffsetHeight-Kuppel.ScrollTop<=0){
Kuppel.scrollTop=0;
}anders{
Kuppel.scrollTop++;
}
}
var meineFunktion = setInterval("moveTop()",Geschwindigkeit);
Kuppel.onmouseover=Funktion(){
clearInterval(meineFunktion);
}
Kuppel.onmouseout=Funktion(){
meineFunktion=setInterval(moveTop,speed);
}
</Skript>
</body>
</html>

3. Die Schnittstelle ist wie folgt:

<<: Die IE-Umgebung schreibt vor, dass die Div-Höhe größer sein muss als die Schrifthöhe

>>: HTML+CSS+JavaScript zum Erstellen eines einfachen Tic-Tac-Toe-Spiels

So zeigen Sie den Datenbankinstallationspfad in MySQL an

Ubuntu E: Sperre /var/lib/dpkg/lock-frontend konnte nicht abgerufen werden – offen (11: Ressource vorübergehend nicht verfügbar)

Ubuntu 18.04, andere Versionen von Ubuntu Frage: ...

HTML+CSS+JavaScript zum Erreichen eines Beispielcodes für das Scrollen in einer Listenschleife

So zeigen Sie den Datenbankinstallationspfad in MySQL an

JavaScript zum Erzielen eines benutzerdefinierten Bildlaufleisteneffekts

Prinzipielle Beispiele für die vier Netzwerktypen von Docker

Empfehlen Sie einige nützliche Lernmaterialien für Neulinge im Webdesign

So konvertieren Sie eine Spalte mit durch Kommas getrennten Werten in Spalten in MySQL

Lösen Sie das Problem beim Zurücksetzen des Kennworts für das Mysql-Root-Benutzerkonto

Eine kurze Erläuterung des Navigationsfensters in Iframe-Webseiten

HTML-Tutorial: Titelattribut und Alt-Attribut

Methode zur Änderung des MySQL-Kontokennworts (Zusammenfassung)

Installation und Konfiguration von MySQL 8.0.15 unter Centos7

Artikel empfehlen

Elegantere Verarbeitung von Datumsangaben in JavaScript basierend auf Day.js

Eine Zeile CSS-Code zur Integration von Avatar und Nationalflagge

So verwenden Sie Vue zum Implementieren von CSS-Übergängen und Animationen

Eine kurze Analyse der Konfigurationselemente des Angular CLI-Releasepfads

Ubuntu E: Sperre /var/lib/dpkg/lock-frontend konnte nicht abgerufen werden – offen (11: Ressource vorübergehend nicht verfügbar)

So konfigurieren Sie die Neuschreibung von Nginx-Domänennamen und die Auflösung von Platzhalterdomänennamen

So setzen Sie den Anfangswert der Auto-Increment-Spalte in der MySQL-Tabelle zurück

js konvertiert ein mehrdimensionales Array in ein eindimensionales Array und ordnet es dann neu

Eine detaillierte Anleitung zu benutzerdefinierten Anweisungen in Vue

Das einfachste Tutorial zur Sicherung und Wiederherstellung von MySQL-Daten aller Zeiten (Teil 2) (Teil 37)

jQuery-Plugin zur Implementierung des sekundären Akkordeonmenüs

Detaillierte grafische Beschreibung des Datenbankinstallationsprozesses der MySQL-Version 5.7.24

Erstellen eines FastDFS-Dateisystems in Docker (Tutorial mit mehreren Images)

Wie wird die Transaktionsisolation von MySQL erreicht?

js zur Implementierung einer Interferenz mit Verifizierungscodes (statisch)