Hogyan készíthetünk JavaScript folyamatos képtárat

Ez JavaScript létrehoz egy görgető sávot, amelyben a képek olyan területe, ahol a képek vízszintesen mozognak a képernyőn. Mivel minden kép eltűnik a megjelenítési terület egyik oldalán, a kép sorozatának elején olvasódik le. Ez folyamatosan mozgatja a képeket a hurkoló sátorban - mindaddig, amíg elegendő kép van a sátorkijelző területének kitöltéséhez.

Ennek a szkriptnek van néhány korlátozása:

• A képek ugyanabban a méretben (szélességben és magasságban) jelennek meg. Ha a képek fizikailag nem azonos méretűek, akkor mind átméretezésre kerülnek. Ez gyenge képminőséget eredményezhet, ezért a legjobb, ha a forrásképeket következetesen méretezi.
• A képek magasságának meg kell egyeznie a sátor számára beállított magassággal, különben a képek átméretezése ugyanazzal a potenciállal jár, mint a fentebb említett rossz képek.
• A kép szélességének és a képek számának szorzata nagyobbnak kell lennie, mint a sátor sávja. Ennek hiányában a legegyszerűbb megoldás, ha csak a tömbben található képeket ismételjük meg, hogy kitöltsük a rést.
instagram viewer
• Az egyetlen interakció, amelyet ez a szkript kínál, a görgetés megállítása, amikor az egeret a sátor felett mozgatja, és folytatódik, amikor az egér elmozdul a képről. Később leírunk egy módosítást, amely elvégezhető az összes kép linkre konvertálására.
• Ha egy oldalon több sátor található, akkor az azonos sebességgel futnak, tehát bármelyikük fölé mozgatása megállítja a mozgást.
• Szüksége van a saját képeire. A példákban szereplők nem képezik részét ennek a szkriptnek.

Az első, másolja a következő JavaScriptet, és mentse el marquee.js.

Ez a kód két képtömböt tartalmaz (a példalap két sávjához), valamint két új mq objektumot, amelyek tartalmazzák a két sávban megjelenítendő információkat.

Törölheti az egyik ilyen objektumot, és a másikot megváltoztathatja, hogy egy folyamatos sáv jelenjen meg az oldalon, vagy megismételheti ezeket az utasításokat, hogy még több sávot hozzon létre.

Az mqRotate függvényt elhaladó mqr-nek kell hívni, miután a sávokat úgy határozták meg, hogy azok kezeljék a forgásokat.

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

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

funkció indítása () {
új mq ('m1', mqAry1,60);
új mq ('m2', mqAry2,60); // ismételje meg a szükséges számú mezőt
mqRotate (mqr); // utolsónak kell lennie
}
window.onload = start;

// Folyamatos képmátrix
// szerzői jogok: 2008. július 24., Stephen Chapman
// http://javascript.about.com
// engedélyt kapott a Javascript használatához a weboldalán
// feltéve, hogy a szkriptben szereplő összes kód (beleértve ezeket)
// megjegyzések) változtatás nélkül használható

var
mqr = []; funkció
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;
mert (var
i = 0; ithis.mqo.ary [i] .src = ed rendű [i]; this.mqo.ary [i] .style.pozíció =
'abszolút'; 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);}
mqRotate függvény (mqr) {if (! mqr) visszatérés; for (var j = mqr hosszúság - 1; j
> -1; j--) {maxa = mqr [j] ar.hossz; for (var i = 0; iMQR [j] .ary [i] .style; x.left = (parseInt (x.balra, 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);}

Ezután adja hozzá a következő kódot az oldal fejrészéhez:

Hozzá kell adnunk egy stíluslap-parancsot annak meghatározásához, hogy hogyan néz ki mindegyik sátorunk.

Íme a kód, amelyet a példaoldalon használtunk:

.marquee {pozíció: relatív;
túlcsordulás: rejtett;
szélesség: 500 képpont;
magasság: 60 képpont;
szegély: szilárd fekete 1 képpont;
}

Ezen tulajdonságok bármelyikét megváltoztathatja a sátorhoz; ennek azonban meg kell maradnia pozíció: relatív.

Vagy elhelyezheti a külső stíluslapban, ha van, vagy beteheti a közöttük címkék az oldal fejében.

A következő lépés az, hogy meghatározza a weboldalon egy div pontot, ahova elhelyezi a képek sávját.

Az első példahelyzet a következő kódot használja:

Az osztály ezt összekapcsolja a stíluslap kódjával, míg az azonosítót használjuk az új mq () hívásban a képek elrendezésének csatolására.

A végső lépés, hogy mindezt összerakjuk, győződjünk meg arról, hogy a mq objektumnak a JavaScript-be történő hozzáadásához szükséges kód tartalmazza-e a megfelelő értékeket.

Az alábbiak szerint néz ki az egyik példa:

új mq ('m1', mqAry1,60);

• Az m1 a div jelölésünk azonosítója, amely megjeleníti a sátorhelyet.
• Az mqAry1 egy hivatkozás egy olyan képek sorozatára, amelyek megjelennek a sátorban.
• A végső 60 érték a képeink szélessége (a képek jobbról balra gördülnek, és így a magasság megegyezik a stíluslapban meghatározottakkal).

További sátorok hozzáadásához csak további képtömböket, további div-elemeket állítottunk be a HTML-kódunkba, esetleg beállítva is további osztályokat annak érdekében, hogy a sátrakat eltérően stílusozzuk, és annyi új mq () utasítást adjunk hozzá, mint amennyire van sátrakban. Csak azt kell ellenőriznünk, hogy az mqRotate () hívás követi őket, hogy a sátorokat nekünk működtessük.

Csak két változtatást kell végrehajtani, hogy a sátorban lévő képeket hivatkozásokká alakítsák.

Először változtassa meg a képtömböt egy képek tömbjéből tömbök tömbjére, ahol a belső tömbök mindegyike egy képet tartalmaz a 0 helyzetben és a link címét az 1. helyzetben.

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

A második dolog az, hogy a forgatókönyv fő részét helyettesíti a következő:

// Folyamatos képmátrix hivatkozásokkal
// szerzői jogok: 2008. szeptember 21., Stephen Chapman
// http://javascript.about.com
// engedélyt kapott a Javascript használatához a weboldalán
// feltéve, hogy a szkriptben szereplő összes kód (beleértve ezeket)
// megjegyzések) változtatás nélkül használható
var mqr = []; mq függvény (id, ary, wid) {this.mqo = document.getElementById (id); var heit = ez.mqo.style.magasság; this.mqo.onmouseout = function () {mqRotate (mqr);}; this.mqo.onmouseover = function () {clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length; for (var i = 0; i -1; j--) {maxa = mqr [j] ar.hossz; for (var i = 0; i

A többi, amit meg kell tennie, ugyanaz marad, mint a hivatkozás nélküli sátor verziójának.