So erstellen Sie ein JavaScript Continuous Image Marquee

Dies JavaScript Erstellt einen Laufrahmen, in dem sich Bilder bewegen, in denen sich Bilder horizontal durch den Anzeigebereich bewegen. Da jedes Bild durch eine Seite des Anzeigebereichs verschwindet, wird es am Anfang der Bildserie gelesen. Dadurch wird eine fortlaufende Bildlaufleiste im Auswahlrahmen erstellt, die sich wiederholt - sofern Sie über genügend Bilder verfügen, um die Breite des Anzeigebereichs des Auswahlrahmens auszufüllen.

Dieses Skript weist jedoch einige Einschränkungen auf:

• Die Bilder werden in derselben Größe (Breite und Höhe) angezeigt. Wenn die Bilder physisch nicht dieselbe Größe haben, wird die Größe aller Bilder geändert. Dies kann zu einer schlechten Bildqualität führen. Daher ist es am besten, die Größe Ihrer Quellbilder konstant zu halten.
• Die Höhe der Bilder muss mit der für das Laufschrift festgelegten Höhe übereinstimmen. Andernfalls wird die Größe der Bilder mit dem gleichen Potenzial für schlechte Bilder geändert, wie oben erwähnt.
• Die Bildbreite multipliziert mit der Anzahl der Bilder muss größer sein als die Auswahlrahmenbreite. Die einfachste Lösung für dieses Problem, wenn nicht genügend Bilder vorhanden sind, besteht darin, die Bilder im Array zu wiederholen, um die Lücke zu füllen.
  instagram viewer
• Die einzige Interaktion, die dieses Skript bietet, besteht darin, den Bildlauf anzuhalten, wenn die Maus über das Auswahlrechteck bewegt wird, und fortzufahren, wenn sich die Maus vom Bild entfernt. Wir beschreiben später eine Änderung, die vorgenommen werden kann, um alle Bilder in Links umzuwandeln.
• Wenn Sie mehrere Zelte auf einer Seite haben, werden alle mit der gleichen Geschwindigkeit ausgeführt. Wenn Sie also mit der Maus über eines dieser Zelte fahren, werden sie alle nicht mehr bewegt.
• Sie benötigen Ihre eigenen Bilder. Die in den Beispielen sind nicht Teil dieses Skripts.

Kopieren Sie zunächst das folgende JavaScript und speichern Sie es unter marquee.js.

Dieser Code enthält zwei Bildarrays (für die beiden Markierungen auf der Beispielseite) sowie zwei neue mq-Objekte, die die Informationen enthalten, die in diesen beiden Markierungen angezeigt werden sollen.

Sie können eines dieser Objekte löschen und das andere so ändern, dass ein fortlaufender Auswahlrahmen auf Ihrer Seite angezeigt wird, oder diese Anweisungen wiederholen, um noch weitere Auswahlrahmen hinzuzufügen.

Die Funktion mqRotate muss als mqr übergeben bezeichnet werden, nachdem die Zelte so definiert wurden, dass sie die Rotationen verarbeiten.

var
mqAry1 = ['Grafik / img0.gif', 'Grafik / img1.gif', 'Grafik / img2.gif', '
Grafik / img3.gif ',' Grafik / img4.gif ',' Grafik / img5.gif ',' Grafik /
img6.gif ',' Grafik / img7.gif ',' Grafik / img8.gif ',' Grafik / img9.gif ',
'Grafik / img10.gif', 'Grafik / img11.gif', 'Grafik / img12.gif', '
Grafiken / img13.gif ',' Grafik / img14.gif '];

var
mqAry2 = ['Grafik / img5.gif', 'Grafik / img6.gif', 'Grafik / img7.gif', '
Grafik / img8.gif ',' Grafik / img9.gif ',' Grafik / img10.gif ',' Grafik /
img11.gif ',' graphics / img12.gif ',' graphics / img13.gif ',' graphics / img14.
gif ',' Grafik / img0.gif ',' Grafik / img1.gif ',' Grafik / img2.gif ','
Grafiken / img3.gif ',' Grafik / img4.gif '];

Funktion start () {
neuer mq ('m1', mqAry1,60);
new mq ('m2', mqAry2,60); // für so viele Felder wie erforderlich wiederholen
mqRotate (mqr); // muss zuletzt kommen
}
window.onload = start;

// Kontinuierliches Bildzelt
// Copyright 24. Juli 2008 von Stephen Chapman
// http://javascript.about.com
// Die Erlaubnis zur Verwendung dieses Javascript auf Ihrer Webseite wird erteilt
// vorausgesetzt, dass der gesamte unten stehende Code in diesem Skript (einschließlich dieser)
// Kommentare) wird unverändert verwendet

var
mqr = []; Funktion
mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit =
this.mqo.style.height; this.mqo.onmouseout = function ()
{mqRotate (mqr);}; this.mqo.onmouseover = function ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length;
für (var
i = 0; ithis.mqo.ary [i] .src = ary [i]; this.mqo.ary [i] .style.position =
'absolut'; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; this.mqo.ary [i] .style.height =
heit; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
Funktion mqRotate (mqr) {if (! mqr) return; für (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; für (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [j] .ary [0] .style; if (parseInt (y.left, 10) + parseInt (y.width, 10) <0)
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) +
parseInt (z.style.width) * maxa) + 'px'; mqr [j] .ary.push (z);}}
mqr [0] .TO = setTimeout ('mqRotate (mqr)', 10);}

Fügen Sie als Nächstes den folgenden Code in den Kopfbereich Ihrer Seite ein:

Wir müssen einen Stylesheet-Befehl hinzufügen, um zu definieren, wie jedes unserer Zelte aussehen soll.

Hier ist der Code, den wir für die auf der Beispielseite verwendeten verwendet haben:

.marquee {Position: relativ;
Überlauf versteckt;
Breite: 500px;
Höhe: 60px;
Rand: festes Schwarz 1px;
}

Sie können jede dieser Eigenschaften für Ihr Festzelt ändern. es muss jedoch bleiben Position: relativ.

Sie können es entweder in Ihr externes Stylesheet einfügen, wenn Sie eines haben, oder es dazwischen einschließen Tags im Kopf Ihrer Seite.

Der nächste Schritt besteht darin, ein Div auf Ihrer Webseite zu definieren, auf dem Sie das Bildzelt platzieren.

Das erste der Beispielzelte verwendete diesen Code:

Die Klasse verknüpft dies mit dem Stylesheet-Code, während die ID im neuen Aufruf von mq () zum Anhängen des Bildrahmens verwendet wird.

Als letztes müssen Sie sicherstellen, dass Ihr Code zum Hinzufügen des mq-Objekts in Ihrem JavaScript nach dem Laden der Seite die richtigen Werte enthält.

So sieht eine der Beispielanweisungen aus:

neuer mq ('m1', mqAry1,60);

• Das m1 ist die ID unseres div-Tags, das das Auswahlrechteck anzeigt.
• mqAry1 ist eine Referenz auf ein Array von Bildern, die im Auswahlrahmen angezeigt werden.
• Der Endwert 60 ist die Breite unserer Bilder (die Bilder werden von rechts nach links gescrollt, sodass die Höhe der im Stylesheet definierten entspricht).

Um zusätzliche Markierungen hinzuzufügen, richten wir einfach zusätzliche Bildarrays ein, zusätzliche Divs in unserem HTML, möglicherweise eingerichtet zusätzliche Klassen, um die Zelte anders zu gestalten und so viele neue mq () -Anweisungen hinzuzufügen, wie wir haben Zelte. Wir müssen nur sicherstellen, dass der Aufruf von mqRotate () ihnen folgt, um die Zelte für uns zu betreiben.

Es müssen nur zwei Änderungen vorgenommen werden, um die Bilder im Auswahlrahmen zu Links zu machen.

Ändern Sie zunächst Ihr Bildarray von einem Bildarray in ein Array von Arrays, wobei jedes der internen Arrays aus einem Bild an Position 0 und der Adresse des Links an Position 1 besteht.

var mqAry1 = [
['graphics / img0.gif', 'blcmarquee1.htm'],
['graphics / img1.gif', 'blclockm1.htm'], ...
['graphics / img14.gif', 'bltypewriter.htm']];

Als zweites müssen Sie den Hauptteil des Skripts durch Folgendes ersetzen:

// Kontinuierliches Bildzelt mit Links
// Copyright 21. September 2008 von Stephen Chapman
// http://javascript.about.com
// Die Erlaubnis zur Verwendung dieses Javascript auf Ihrer Webseite wird erteilt
// vorausgesetzt, dass der gesamte unten stehende Code in diesem Skript (einschließlich dieser)
// Kommentare) wird unverändert verwendet
var mqr = []; Funktion mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit = this.mqo.style.height; this.mqo.onmouseout = function () {mqRotate (mqr);}; this.mqo.onmouseover = function () {clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length; für (var i = 0; i -1; j--) {maxa = mqr [j] .ary.length; für (var i = 0; i

Der Rest von dem, was Sie tun müssen, bleibt der gleiche wie für die Version des Festzeltes ohne die Links beschrieben.