Hur man skapar en kontinuerlig JavaScript-bildmärke

Detta JavaScript skapar en rullande markering i vilken bildområdet där bilder rör sig horisontellt genom visningsområdet. När varje bild försvinner genom en sida av visningsområdet läses den i början av bildserien. Detta skapar en kontinuerlig bläddring av bilder i markören som slingrar - så länge du har tillräckligt med bilder för att fylla bredden på markeringsvisningsområdet.

Detta skript har några begränsningar, dock:

• Bilderna visas i samma storlek (både bredd och höjd). Om bilderna inte är fysiskt lika stora, ändras alla storlekar. Detta kan resultera i dålig bildkvalitet, så det är bäst att konsekvent storlek på dina källbilder.
• Höjden på bilderna måste matcha den inställda höjden för markören, annars kommer bilderna att ändras med samma potential för dåliga bilder som nämns ovan.
• Bildbredden multiplicerad med antalet bilder måste vara större än markeringsbredden. Den enklaste fixen för detta om det inte finns tillräckliga bilder är att bara upprepa bilderna i matrisen för att fylla mellanrummet.
instagram viewer
• Den enda interaktion som detta skript erbjuder är att stoppa bläddringen när musen flyttas över markören och återupptas när musen rör sig från bilden. Vi beskriver senare en modifiering som kan göras för att konvertera alla bilder till länkar.
• Om du har flera markeringar på en sida, kör de alla med samma hastighet, så att man över en av dem får dem att sluta flytta.
• Du behöver dina egna bilder. De i exemplen är inte en del av detta skript.

Den första, kopiera följande JavaScript och spara det som marquee.js.

Den här koden innehåller två bildmatriser (för de två markeringarna på exempelsidan), samt två nya mq-objekt som innehåller informationen som ska visas i de två markeringarna.

Du kan ta bort ett av dessa objekt och ändra det andra för att visa en kontinuerlig markering på din sida eller upprepa dessa uttalanden för att lägga till ännu fler markeringar.

Funktionen mqRotate måste kallas passerar mqr efter att markeringarna har definierats som att hantera rotationerna.

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','
grafik / 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 ' 'grafik / img12.gif', 'grafik / img13.gif',' grafik / img14.
gif ' 'grafik / img0.gif', 'grafik / img1.gif', 'grafik / img2.gif','
grafik / img3.gif', 'grafik / img4.gif'];

funktionsstart () {
ny mq ('m1', mqAry1,60);
ny mq ('m2', mqAry2,60); // upprepa för så många bränslen som krävs
mqRotate (mqr); // måste komma sist
}
windows.onload = start;

// Kontinuerlig bildmarkering
// copyright 24 juli 2008 av Stephen Chapman
// http://javascript.about.com
// tillstånd att använda detta Javascript på din webbsida ges
// förutsatt att all koden nedan i detta skript (inklusive dessa
// kommentarer) används utan några ändringar

var
mqr = []; fungera
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 =
han det; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
funktion mqRotate (mqr) {if (! mqr) return; för (var j = mqr. längd - 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);}

Lägg sedan till följande kod i huvudavsnittet på din sida:

Vi måste lägga till ett stilarkommando för att definiera hur vart och ett av våra markeringar kommer att se ut.

Här är koden som vi använde för dem på exempelsidan:

.marquee {position: relativ;
översvämning: dold;
bredd: 500 px;
höjd: 60px;
kant: solid svart 1px;
}

Du kan ändra någon av dessa egenskaper för din markör; det måste dock förbli position: relativ.

Du kan antingen placera det i ditt externa formatmall om du har ett eller bifoga det mellan taggar i huvudet på din sida.

Nästa steg är att definiera en div på din webbsida där du placerar markeringsbilden.

Den första av exemplet markörer använde denna kod:

Klassen kopplar detta till stilarkskoden medan id är det vi kommer att använda i det nya mq () -samtalet för att bifoga markering av bilder.

Den sista saken att göra för att sätta samman allt detta är att se till att din kod för att lägga till mq-objektet i din JavaScript efter att sidan laddas innehåller rätt värden.

Så här ser ett av exemplet uttalanden:

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

• M1 är id för vår div-tagg som visar markören.
• mqAry1 är en referens till en matris med bilder som kommer att visas i markören.
• Det slutliga värdet 60 är bredden på våra bilder (bilderna kommer att bläddra från höger till vänster och så höjden är densamma som vi definierade i mallen).

För att lägga till ytterligare markeringar ställer vi bara in ytterligare bildmatriser, ytterligare div i vår HTML, eventuellt konfigurering ytterligare klasser för att utforma markeringarna annorlunda och lägga till så många nya mq () uttalanden som vi har tält. Vi behöver bara se till att mqRotate () -samtalet följer dem för att driva markeringarna för oss.

Det är bara två ändringar du behöver göra för att göra bilderna i markören till länkar.

Först ändra din bildgrupp från en matris med bilder till en matris med array där var och en av de interna matriserna består av en bild i position 0 och adressen till länken i position 1.

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

Den andra saken att göra är att ersätta följande för skriptets huvuddel:

// Kontinuerlig bildmarkering med länkar
// copyright 21 september 2008 av Stephen Chapman
// http://javascript.about.com
// tillstånd att använda detta Javascript på din webbsida ges
// förutsatt att all koden nedan i detta skript (inklusive dessa
// kommentarer) används utan några ändringar
var mqr = []; funktion mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit = this.mqo.style.height; this.mqo.onmouseout = funktion () {mqRotate (mqr);}; this.mqo.onmouseover = funktion () {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

Resten av vad du behöver göra förblir densamma som beskrivits för versionen av markören utan länkarna.