Kako napraviti JavaScript kontinuiranu sliku

Ovaj JavaScript stvara pomični okvir u kojem se slike u kojima se slike kreću vodoravno kroz područje prikaza. Kako svaka slika nestaje s jedne strane područja prikaza, ona se iščitava na početku niza slika. Ovo stvara kontinuirano pomicanje slika na matrici koja se petlja - sve dok imate dovoljno slika da ispunite širinu područja prikaza okvira.

Ova skripta, međutim, ima nekoliko ograničenja:

• Slike su prikazane u istoj veličini (i širine i visine). Ako slike nisu fizički iste veličine, sve će se veličine promijeniti. To može rezultirati lošom kvalitetom slika, tako da je najbolje dosljedno veličinu izvornih slika.
• Visina slika mora odgovarati visini postavljenoj za crtež, u suprotnom, slike će se mijenjati s istim potencijalom za gore navedene loše slike.
• Širina slike pomnožena s brojem slika mora biti veća od širine okvira. Najlakše rješenje za to ako nema dovoljno slika je samo ponoviti slike u nizu da biste popunili prazninu.
• Jedina interakcija koju ova skripta nudi je zaustavljanje pomicanja mišem preko strelice i nastavljanje kad miš pomakne sliku. Kasnije ćemo opisati modifikaciju koja se može napraviti kako bi se sve slike pretvorile u veze.
  instagram viewer
• Ako na stranici imate nekoliko markiranih oznaka, sve se pokreću jednakom brzinom, pa će prekrivanje bilo kojeg od njih uzrokovati da se svi prestanu kretati.
• Trebate svoje slike. Oni u primjerima nisu dio ove skripte.

Prvo, kopirajte sljedeći JavaScript i spremite ga kao marquee.js.

Ovaj kôd sadrži dvije slikovne nizove (za dvije marke na primjernoj stranici), kao i dva nova mq objekta koji sadrže informacije koje će se prikazati na te dvije marke.

Možete izbrisati jedan od tih objekata i promijeniti drugi za prikaz jednog kontinuiranog okvira na vašoj stranici ili ponoviti te izjave kako biste dodali još marki.

Funkcija mqRotate mora biti nazvana prolazeća mqr nakon što su marke definirane kao one koje će upravljati rotacijama.

var
mqAry1 = [ 'slikama / img0.gif', 'grafički / img1.gif', 'grafički / img2.gif',”
grafika / img3.gif ' ' grafika / img4.gif' ' grafika / img5.gif'', grafike /
img6.gif”, 'grafika / img7.gif', 'grafika / img8.gif', 'grafika / img9.gif'
'Grafika / img10.gif', 'grafika / img11.gif', 'grafika / img12.gif',”
grafika / img13.gif”, 'grafički / img14.gif'];

var
mqAry2 = [ 'slikama / img5.gif', 'grafički / img6.gif', 'grafički / img7.gif',”
grafika / img8.gif ' ' grafika / img9.gif' ' grafika / img10.gif'', grafike /
img11.gif ' 'grafika / img12.gif', 'grafički / img13.gif',' grafika / img14.
GIF ' 'grafički / img0.gif', 'grafika / img1.gif', 'grafika / img2.gif','
grafika / img3.gif”, 'grafički / img4.gif'];

funkcija start () {
novi mq ('m1', mqAry1,60);
novi mq ('m2', mqAry2,60); // ponoviti za onoliko polja koliko je potrebno
mqRotate (mqr); // mora doći zadnji
}
window.onload = početak;

// Kontinuirana slika
// autorska prava 24. srpnja 2008. Stephen Chapman
// http://javascript.about.com
// dozvoljeno je korištenje ovog Javascripta na vašoj web stranici
// pod uvjetom da je sav kod naveden u ovoj skripti (uključujući ovu
// komentari) koristi se bez ikakvih preinaka

var
mqr = []; funkcija
mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit =
this.mqo.style.height; this.mqo.onmouseout = funkcija ()
{mqRotate (mqr);}; this.mqo.onmouseover = funkcija ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length;
za (var.)
i = 0; ithis.mqo.ary [I] = .src arni [i]; this.mqo.ary [i] .style.position =
„Apsolutni”; 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);}
funkcija mqRotate (mqr) {if (! mqr) return; za (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; za (var i = 0; imQ [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mQ [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);}

Zatim dodajte sljedeći kôd u glavni dio svoje stranice:

Moramo dodati naredbu tablice sa stilovima kako bismo definirali kako će izgledati svaka naša marka.

Evo koda koji smo koristili za one na primjernoj stranici:

.marquee {položaj: relativan;
preljev: skriven;
širina: 500px;
visina: 60px;
obrub: čvrsta crna 1px;
}

Možete promijeniti bilo koje od ovih svojstava za svoj trgovački obrt; međutim, mora ostati položaj: relativan.

Možete ga ili staviti u svoj vanjski list sa stilovima ako ga imate ili ga priložiti između oznake u glavi stranice.

Sljedeći je korak definiranje div-a na vašoj web stranici na kojem ćete postaviti okvir slike.

Prva od primjera marke koristila je ovaj kod:

Klasa to povezuje sa kodom tablice stilova, dok je id ono što ćemo koristiti u novom pozivu mq () za pričvršćivanje okvira slika.

Završna stvar koju trebate sastaviti je da osigurate da vaš kôd za dodavanje mq objekta u vaš JavaScript nakon što stranica učita sadrži ispravne vrijednosti.

Evo kako izgleda jedna od primjera izjava:

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

• M1 je id naše oznake div koja će prikazati okvir.
• mqAry1 je referenca na niz slika koje će se prikazati u okviru.
• Konačna vrijednost 60 je širina naših slika (slike će se pomicati s desna na lijevo, tako da je visina ista kao što smo definirali u tablici stilova).

Za dodavanje dodatnih okvira samo smo postavili dodatne slikovne nizove, dodatne div-ove u našem HTML-u, eventualno postavili dodatne nastave kako bismo drugačije stilizirali okvire i dodali onoliko novih mq () izjava koliko imamo marquees. Trebamo samo osigurati da ih mqRotate () poziv slijedi da upravljaju oznakama za nas.

Potrebne su samo dvije promjene kako biste slike na slici dodali u veze.

Prvo, promijenite svoj slikovni niz iz niza slika u niz matrica gdje se svaki unutarnji niz sastoji od slike u položaju 0 i adrese veze u položaju 1.

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

Drugo što trebate učiniti je zamijeniti sljedeće za glavni dio skripte:

// Kontinuirana slika s vezama
// autorska prava 21. rujna 2008. Stephen Chapman
// http://javascript.about.com
// dozvoljeno je korištenje ovog Javascripta na vašoj web stranici
// pod uvjetom da je sav kod naveden u ovoj skripti (uključujući ovu
// komentari) koristi se bez ikakvih preinaka
var mqr = []; funkcija mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit = this.mqo.style.height; this.mqo.onmouseout = funkcija () {mqRotate (mqr);}; this.mqo.onmouseover = funkcija () {clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length; za (var i = 0; i -1; j--) {maxa = mqr [j] .ary.length; za (var i = 0; i

Ostatak onoga što trebate učiniti ostaje isto kao što je opisano za verziju paketa bez veza.