Jak zrobić ciągły obraz markiza JavaScript

To JavaScript tworzy przewijaną markizę, w której obrazy poruszają się poziomo przez obszar wyświetlania. Ponieważ każdy obraz znika po jednej stronie obszaru wyświetlania, jest on odczytywany na początku serii obrazów. Powoduje to ciągłe przewijanie obrazów w markizie, które zapętlają się, o ile masz wystarczającą liczbę obrazów do wypełnienia szerokości obszaru wyświetlania markizy.

Ten skrypt ma jednak kilka ograniczeń:

• Obrazy są wyświetlane w tym samym rozmiarze (zarówno szerokość, jak i wysokość). Jeśli obrazy nie są fizycznie tego samego rozmiaru, wszystkie zostaną przeskalowane. Może to spowodować niską jakość obrazu, dlatego najlepiej jest konsekwentnie dopasowywać rozmiar obrazów źródłowych.
• Wysokość obrazów musi odpowiadać wysokości ustawionej dla markizy, w przeciwnym razie rozmiar obrazów zostanie zmieniony z takim samym potencjałem w przypadku słabych obrazów, o których mowa powyżej.
• Szerokość obrazu pomnożona przez liczbę obrazów musi być większa niż szerokość markizy. Najłatwiejszym rozwiązaniem tego problemu, jeśli nie ma wystarczającej liczby obrazów, jest powtórzenie obrazów w tablicy w celu wypełnienia luki.
  instagram viewer
• Jedyną interakcją, jaką oferuje ten skrypt, jest zatrzymanie przewijania, gdy mysz jest przesuwana nad markizą, i wznawianie, gdy mysz przesuwa się z obrazu. Później opisujemy modyfikację, którą można wykonać, aby przekonwertować wszystkie obrazy na linki.
• Jeśli na stronie znajduje się wiele markiz, wszystkie biegną z tą samą prędkością, więc najechanie kursorem myszy na dowolną z nich spowoduje, że wszystkie przestaną się poruszać.
• Potrzebujesz własnych zdjęć. Te w przykładach nie są częścią tego skryptu.

Najpierw skopiuj następujący kod JavaScript i zapisz go jako marquee.js.

Ten kod zawiera dwie tablice obrazków (dla dwóch markiz na stronie przykładowej), a także dwa nowe obiekty mq zawierające informacje do wyświetlenia w tych dwóch markach.

Możesz usunąć jeden z tych obiektów i zmienić drugi, aby wyświetlić jeden ciągły markizę na swojej stronie lub powtórzyć te instrukcje, aby dodać jeszcze więcej markiz.

Funkcja mqRotate musi zostać wywołana przez przekazanie mqr po zdefiniowaniu markizy, która będzie obsługiwać rotacje.

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

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

funkcja start () {
nowy mq („m1”, mqAry1,60);
new mq ('m2', mqAry2,60); // powtórz dla dowolnej liczby pól paliwowych, ile potrzeba
mqRotate (mqr); // musi przyjść na końcu
}
window.onload = start;

// Ciągły obraz markiza
// prawa autorskie 24 lipca 2008 r. autor: Stephen Chapman
// http://javascript.about.com
// udzielono zgody na używanie tego Javascript na twojej stronie internetowej
// pod warunkiem, że cały kod poniżej w tym skrypcie (łącznie z tymi
// komentarze) jest używany bez żadnych zmian

var
mqr = []; funkcjonować
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;
dla (var
i = 0;this.mqo.ary [i] .src = ary [i]; this.mqo.ary [i] .style.position =
'absolutny'; 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);}
funkcja mqRotate (mqr) {if (! mqr) return; dla (var j = mqr. długość - 1; jot
> -1; j--) {maxa = mqr [j] .ary.length; dla (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);}

Następnie dodaj następujący kod do sekcji nagłówka swojej strony:

Musimy dodać polecenie arkusza stylów, aby zdefiniować, jak będą wyglądać nasze markizy.

Oto kod użyty dla tych na przykładowej stronie:

.marquee {pozycja: względna;
przelew: ukryty;
szerokość: 500px;
wysokość: 60 pikseli;
obramowanie: jednolity czarny 1px;
}

Możesz zmienić dowolne z tych właściwości swojego namiotu; jednak musi pozostać pozycja: względna.

Możesz umieścić go w zewnętrznym arkuszu stylów, jeśli go masz, lub umieścić go między nimi tagi w nagłówku strony.

Następnym krokiem jest zdefiniowanie div na swojej stronie internetowej, w której umieścisz markizę obrazów.

Pierwszy z przykładowych markiz używał tego kodu:

Klasa kojarzy to z kodem arkusza stylów, podczas gdy identyfikator będzie używany w nowym wywołaniu mq () w celu dołączenia markizy obrazów.

Ostatnią rzeczą do zrobienia, aby połączyć to wszystko w całość, jest upewnienie się, że kod dodający obiekt mq w JavaScript po załadowaniu strony zawiera prawidłowe wartości.

Oto jak wygląda jedna z przykładowych instrukcji:

nowy mq („m1”, mqAry1,60);

• M1 jest identyfikatorem naszego znacznika div, który wyświetli markizę.
• mqAry1 to odniesienie do tablicy obrazów, które będą wyświetlane w namiocie.
• Końcowa wartość 60 to szerokość naszych zdjęć (obrazy będą przewijane od prawej do lewej, a więc wysokość jest taka sama, jak zdefiniowaliśmy w arkuszu stylów).

Aby dodać dodatkowe markizy, po prostu skonfigurowaliśmy dodatkowe tablice graficzne, dodatkowe divy w naszym HTML, ewentualnie skonfigurowane dodatkowe klasy, aby inaczej stylizować markizy i dodać tyle nowych instrukcji mq (), ile mamy markizy. Musimy tylko upewnić się, że wywołanie mqRotate () podąża za nimi, aby obsługiwać markizy za nas.

Są tylko dwie zmiany, które musisz wprowadzić, aby przekształcić obrazy w namiocie w łącza.

Najpierw zmień tablicę obrazu z tablicy obrazów na tablicę, w której każda z wewnętrznych tablic składa się z obrazu w pozycji 0 i adresu łącza w pozycji 1.

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

Drugą rzeczą do zrobienia jest podstawienie następującej części głównej części skryptu:

// Ciągły obraz markiz z linkami
// prawa autorskie 21 września 2008 r. autor: Stephen Chapman
// http://javascript.about.com
// udzielono zgody na używanie tego Javascript na twojej stronie internetowej
// pod warunkiem, że cały kod poniżej w tym skrypcie (łącznie z tymi
// komentarze) jest używany bez żadnych zmian
var mqr = []; funkcja 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; dla (var i = 0; i -1; j--) {maxa = mqr [j] .ary.length; dla (var i = 0; i

Reszta czynności, które musisz zrobić, pozostaje taka sama jak opisana dla wersji markizy bez linków.