Hoe maak je een JavaScript Continuous Image Marquee

Deze JavaScript maakt een scrollende selectiekader waarin het afbeeldingengebied waar afbeeldingen horizontaal door het weergavegebied bewegen. Elke afbeelding verdwijnt door één kant van het weergavegebied en wordt gelezen aan het begin van de reeks afbeeldingen. Dit zorgt voor een continue scroll van afbeeldingen in het selectiekader die een lus vormen, zolang u maar genoeg afbeeldingen heeft om de breedte van het selectiekader van het selectiekader te vullen.

Dit script heeft echter enkele beperkingen:

• De afbeeldingen worden op hetzelfde formaat weergegeven (zowel breedte als hoogte). Als de afbeeldingen niet fysiek even groot zijn, worden ze allemaal verkleind. Dit kan resulteren in een slechte beeldkwaliteit, dus het is het beste om uw bronafbeeldingen consistent te schalen.
• De hoogte van de afbeeldingen moet overeenkomen met de hoogte die is ingesteld voor het selectiekader, anders wordt de grootte van de afbeeldingen gewijzigd met hetzelfde potentieel voor slechte afbeeldingen die hierboven zijn genoemd.
instagram viewer
• De afbeeldingsbreedte vermenigvuldigd met het aantal afbeeldingen moet groter zijn dan de breedte van het selectiekader. De eenvoudigste oplossing hiervoor als er onvoldoende afbeeldingen zijn, is door de afbeeldingen in de array te herhalen om de leemte op te vullen.
• De enige interactie die dit script biedt, is het stoppen van de scroll wanneer de muis over het selectiekader wordt bewogen en wordt hervat wanneer de muis van de afbeelding af beweegt. We beschrijven later een wijziging die kan worden aangebracht om alle afbeeldingen naar links te converteren.
• Als u meerdere partytenten op een pagina heeft, lopen ze allemaal met dezelfde snelheid, dus als u ze allemaal over de muis beweegt, stoppen ze allemaal met bewegen.
• Je hebt je eigen afbeeldingen nodig. De voorbeelden in de voorbeelden maken geen deel uit van dit script.

Kopieer eerst het volgende JavaScript en sla het op als selectiekader.js.

Deze code bevat twee afbeeldingsarrays (voor de twee partytenten op de voorbeeldpagina), evenals twee nieuwe mq-objecten die de informatie bevatten die in die twee partytenten moet worden weergegeven.

U kunt een van die objecten verwijderen en de andere wijzigen om een ​​doorlopend selectiekader op uw pagina weer te geven of die uitspraken herhalen om nog meer selectiekaders toe te voegen.

De functie mqRotate moet passerende mqr worden genoemd nadat de selectiekaders zijn gedefinieerd, omdat deze de rotaties aankunnen.

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

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

functie start () {
nieuwe mq ('m1', mqAry1,60);
nieuwe mq ('m2', mqAry2,60); // herhaal voor zoveel brandstofvelden als nodig is
mqRotate (mqr); // moet als laatste komen
}
window.onload = start;

// Doorlopende beeldtent
// copyright 24 juli 2008 door Stephen Chapman
// http://javascript.about.com
// toestemming om dit Javascript op uw webpagina te gebruiken wordt verleend
// op voorwaarde dat alle onderstaande code in dit script (inclusief deze
// opmerkingen) wordt gebruikt zonder enige wijziging

var
mqr = []; functie
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;
voor (var
i = 0; ikthis.mqo.ary [i] .src = ary [i]; this.mqo.ary [i] .style.position =
'absoluut'; 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);}
functie mqRotate (mqr) {if (! mqr) return; voor (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; voor (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);}

Voeg vervolgens de volgende code toe aan het hoofdgedeelte van uw pagina:

We moeten een opdracht voor een stijlblad toevoegen om te definiëren hoe elk van onze feesttenten eruit zal zien.

Hier is de code die we hebben gebruikt voor die op de voorbeeldpagina:

.marquee {positie: relatief;
overloop verborgen;
breedte: 500px;
hoogte: 60px;
rand: effen zwart 1px;
}

U kunt al deze eigenschappen voor uw selectiekader wijzigen; het moet echter blijven positie: relatief.

Je kunt het ofwel in je externe stijlblad plaatsen als je er een hebt, of er tussen tags in het hoofd van uw pagina.

De volgende stap is het definiëren van een div in uw webpagina waar u de selectiekader van afbeeldingen plaatst.

De eerste voorbeeldtent gebruikte deze code:

De klasse associeert dit met de stylesheet-code, terwijl de id is wat we zullen gebruiken in de nieuwe aanroep van mq () om het selectiekader van afbeeldingen toe te voegen.

Het laatste dat u moet doen om dit allemaal samen te voegen, is ervoor te zorgen dat uw code om het mq-object in uw JavaScript toe te voegen nadat de pagina is geladen, de juiste waarden bevat.

Zo ziet een van de voorbeeldverklaringen eruit:

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

• De m1 is de id van onze div-tag die het selectiekader zal weergeven.
• mqAry1 is een verwijzing naar een reeks afbeeldingen die in het selectiekader worden weergegeven.
• De uiteindelijke waarde 60 is de breedte van onze afbeeldingen (de afbeeldingen scrollen van rechts naar links en dus is de hoogte hetzelfde als we hebben gedefinieerd in het stijlblad).

Om extra feesttenten toe te voegen, hebben we gewoon extra afbeeldingsarrays opgezet, extra divs in onze HTML, mogelijk ingesteld extra klassen om de feesttenten anders te stylen en zoveel nieuwe mq () -instructies toe te voegen als we hebben feesttenten. We moeten er alleen voor zorgen dat de oproep mqRotate () hen volgt om de feesttenten voor ons te bedienen.

U hoeft slechts twee wijzigingen aan te brengen om van de afbeeldingen in de selectiekader links te maken.

Wijzig eerst uw afbeeldingsarray van een array van afbeeldingen naar een array van arrays waarbij elk van de interne arrays bestaat uit een afbeelding op positie 0 en het adres van de link op positie 1.

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

Het tweede dat u moet doen, is het hoofdgedeelte van het script vervangen door het volgende:

// Doorlopende beeldtent met links
// copyright 21 september 2008 door Stephen Chapman
// http://javascript.about.com
// toestemming om dit Javascript op uw webpagina te gebruiken wordt verleend
// op voorwaarde dat alle onderstaande code in dit script (inclusief deze
// opmerkingen) wordt gebruikt zonder enige wijziging
var mqr = []; functie 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; voor (var i = 0; i -1; j--) {maxa = mqr [j] .ary.length; voor (var i = 0; i

De rest van wat u moet doen, blijft hetzelfde als beschreven voor de versie van het selectiekader zonder de links.