Kuidas teha JavaScripti pidevat pildimarki

See JavaScript loob kerimisobjekti, kus pildiala, kus pildid liiguvad horisontaalselt läbi kuvapiirkonna. Kuna iga pilt kaob kuvari ühe külje kaudu, loetakse see pildiseeria algusesse. See loob silmnäitavas telgis pidevat piltide kerimist - kui teil on piisavalt pilte, et täita telkide vaateala laius.

Sellel skriptil on siiski mõned piirangud:

• Pilte kuvatakse sama suurusega (nii laiuse kui ka kõrgusega). Kui pildid pole füüsiliselt ühesuurused, siis muudetakse nende suurust. See võib põhjustada halva pildikvaliteedi, seetõttu on kõige parem oma lähtekujutisi järjepidevalt mõõta.
• Kujutiste kõrgus peab vastama telgi jaoks seatud kõrgusele, vastasel juhul vähendatakse piltide suurust sama potentsiaaliga, nagu eespool mainitud halbade piltide jaoks.
• Kujutise laius korrutatuna piltide arvuga peab olema suurem kui telgi laius. Kui kujutisi pole piisavalt, on seda kõige lihtsam parandada, kui soovite massiivi pilte korrata, et tühimikku täita.
• Ainus interaktsioon, mida see skript pakub, on kerimise peatamine, kui hiir liigutatakse üle telgi, ja jätkamine, kui hiir pildilt eemaldub. Hiljem kirjeldame modifikatsiooni, mille abil saab kõik pildid linkideks teisendada.
  instagram viewer
• Kui teil on lehel mitu telki, jooksevad nad kõik sama kiirusega, nii et ükskõik millise neist üle viimine peatab nende kõigi liikumise.
• Te vajate oma pilte. Näidetes olevad ei kuulu selle skripti alla.

Esimene kopeerige järgmine JavaScripti ja salvestage see kujul marquee.js.

See kood sisaldab kahte pildimassiivi (näidislehel olevate kahe telje jaoks), samuti kahte uut mq-objekti, mis sisaldavad nendes kahes telgis kuvatavat teavet.

Võite ühe neist objektidest kustutada ja teise muuta, et kuvada oma lehel üks pidev telk, või korrata neid avaldusi, et veelgi rohkem telki lisada.

Funktsiooni mqRotate tuleb nimetada mööduvaks mqr pärast seda, kui teljed on määratletud kui sellised, mis käsitlevad pöörlemist.

var
mqAry1 = ['graphics / img0.gif', 'graphics / img1.gif', 'graphics / img2.gif', '
graafika / 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', '
graafika / img13.gif ',' graafika / img14.gif '];

var
mqAry2 = ['graphics / img5.gif', 'graphics / img6.gif', 'graphics / img7.gif', '
graafika / 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 ','
graafika / img3.gif ',' graafika / img4.gif '];

funktsiooni algus () {
uus mq ('m1', mqAry1,60);
uus mq ('m2', mqAry2,60); // korrake nii palju kütusekoguseid, kui vaja
mqRotate (mqr); // peab tulema viimane
}
aken.koormus = algus;

// Pidev pildimarkett
// autoriõigus 24. juuli 2008, autor Stephen Chapman
// http://javascript.about.com
// antakse luba selle Javascripti kasutamiseks oma veebilehel
// tingimusel, et kogu selle skripti allpool olev kood (kaasa arvatud need)
// kommentaarid) kasutatakse muudatusi

var
mqr = []; funktsiooni
mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit =
see.mqo.style.kõrgus; this.mqo.onmouseout = funktsioon ()
{mqRotate (mqr);}; this.mqo.onmouseover = funktsioon ()
{clearTimeout (mqr [0] .TO);}; see.mqo.ary = []; var maxw = ary.length;
jaoks (var
i = 0; isee.mqo.ary [i] .src = ary [i]; see.mqo.ary [i] .style.positsioon =
'absoluutne'; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; see.mqo.ary [i] .style.height =
heit; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
funktsioon mqRotate (mqr) {if (! mqr) return; jaoks (var j = mqr pikkus - 1; j
> -1; j--) {maxa = mqr [j] ar.pikkus; jaoks (var i = 0; imqr [j] arüür [i] stiilis; x.left = (parseInt (x.vasak, 10) -1) + 'px';} var y =
mqr [j] aiar [0] stiil; if (parseInt (y.vasa, 10) + parseInt (y.laius, 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);}

Järgmisena lisage oma lehe päisesektsiooni järgmine kood:

Peame lisama stiililehe käsu, et määratleda, kuidas kõik meie telgid välja näevad.

Siin on kood, mida kasutasime näidislehel olevate jaoks:

.marke {positsioon: sugulane;
ülevool: varjatud;
laius: 500 pikslit;
kõrgus: 60 pikslit;
ääris: tahke must 1px;
}

Saate oma telgi jaoks mõnda neist omadustest muuta; see peab siiski jääma positsioon: sugulane.

Võite selle paigutada oma välisele stiililehele, kui see teil on, või siis selle vahele lisada sildid teie lehe peas.

Järgmine samm on määratleda oma veebisaidil jaotus, kuhu paigutada piltide telg.

Esimeses näites kasutatud telkidest kasutas seda koodi:

Klass seostab selle stiilitabeli koodiga, samas kui id on see, mida kasutame uues mq () kutses piltide telje lisamiseks.

Viimane asi, mis selle kõige kokku panemiseks tuleb teha, veenduge, et teie kood mq-objekti lisamiseks oma JavaScripti pärast lehe laadimist sisaldab õigeid väärtusi.

Üks näitelausetest näeb välja järgmine:

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

• M1 on meie div sildi id, mis tähistab telki.
• mqAry1 on viide pildimassiivile, mida näidatakse telgis.
• Lõppväärtus 60 on meie piltide laius (pildid kerivad paremalt vasakule ja seega on kõrgus sama, nagu määratlesime stiililehel).

Täiendavate telkide lisamiseks seadisime lihtsalt üles täiendavad pildimassiivid, meie HTML-is täiendavad divid, võimalik, et ka üles seatud lisaklassid, et kujundada telki erinevalt ja lisada nii palju uusi mq () avaldusi, kui meil on telgid. Peame lihtsalt veenduma, et mqRotate () kutse järgib neid meie jaoks telkide haldamiseks.

Selleks, et telgis olevad pildid linkideks muuta, peate tegema ainult kaks muudatust.

Esiteks muutke oma pildimassiiv pildimassiivist massiivi massiiviks, kus iga sisemine massiiv koosneb kujutisest positsioonis 0 ja lingi aadressist positsioonis 1.

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

Teine asi, mida teha, on skripti põhiosa asendamine järgmisega:

// Pidev pildimärk koos linkidega
// autoriõigused 21. september 2008, autor Stephen Chapman
// http://javascript.about.com
// antakse luba selle Javascripti kasutamiseks oma veebilehel
// tingimusel, et kogu selle skripti allpool olev kood (kaasa arvatud need)
// kommentaarid) kasutatakse muudatusi
var mqr = []; funktsioon mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit = see.mqo.style.kõrgus; this.mqo.onmouseout = function () {mqRotate (mqr);}; this.mqo.onmouseover = function () {clearTimeout (mqr [0] .TO);}; see.mqo.ary = []; var maxw = ary.length; jaoks (var i = 0; i -1; j--) {maxa = mqr [j] ar.pikkus; jaoks (var i = 0; i

Ülejäänud osa, mida peate tegema, jääb samaks, mida on kirjeldatud ilma linkideta telgi versiooni jaoks.