Как да направите непрекъсната снимка на изображение в JavaScript

Това JavaScript създава превъртаща матрица, в която областта на изображенията, където изображенията се движат хоризонтално през зоната на дисплея. Тъй като всяко изображение изчезва през едната страна на областта на дисплея, то се чете в началото на поредицата изображения. Това създава непрекъснато превъртане на изображения в маркера, който се завърта - стига да имате достатъчно изображения, за да запълните ширината на зоната за показване на маркировката.

Този скрипт обаче има няколко ограничения:

• Изображенията се показват в един и същ размер (както на ширина, така и на височина). Ако изображенията не са с еднакъв размер, всички те ще бъдат оразмерени. Това може да доведе до лошо качество на изображението, така че е най-добре последователно да оразмерявате изходните си изображения.
• Височината на изображенията трябва да съответства на височината, зададена за маркера, в противен случай изображенията ще бъдат оразмерени със същия потенциал за лоши изображения, споменати по-горе.
• Ширината на изображението, умножена по броя на изображенията, трябва да бъде по-голяма от ширината на маркировката. Най-лесното решение за това, ако няма достатъчно изображения, е просто да повторите изображенията в масива, за да запълните празнината.
  instagram viewer
• Единственото взаимодействие, което този скрипт предлага, е спирането на превъртането, когато мишката се премести върху маркера и възобновяването, когато мишката се премести от изображението. По-късно описваме модификация, която може да бъде направена за преобразуване на всички изображения в връзки.
• Ако имате няколко маркировки на страница, всички те се изпълняват с една и съща скорост, така че припокриването на който и да е от тях ще накара всички да спрат да се движат.
• Нуждаете се от собствени изображения. Тези в примерите не са част от този скрипт.

Първият, копирайте следния JavaScript и го запишете като marquee.js.

Този код съдържа два масива от изображения (за двата маркера на примерната страница), както и два нови mq обекта, съдържащи информацията, която трябва да бъде показана в тези две маркировки.

Можете да изтриете един от тези обекти и да промените другия, за да покажете едно непрекъснато маркиране на страницата си или да повторите тези изявления, за да добавите още повече маркировки.

Функцията mqRotate трябва да бъде наречена преминаваща mqr, след като маркировките са дефинирани, така че да се справят с въртенията.

Var
mqAry1 = [ 'графики / img0.gif "," графики / img1.gif "," графики / img2.gif ","
графики / img3.gif ',' графични / img4.gif ',' графични / img5.gif ',' графични елементи /
img6.gif "," графика / img7.gif "," графика / img8.gif "," графика / img9.gif "
"Графики / img10.gif", "графика / img11.gif", "графика / img12.gif ','
графики / img13.gif "," графични / img14.gif '];

Var
mqAry2 = [ 'графики / img5.gif "," графики / img6.gif "," графики / img7.gif ","
графики / img8.gif ',' графични / img9.gif ',' графични / img10.gif ',' графични елементи /
img11.gif "," графика / img12.gif "," графика / img13.gif "," графика / img14.
GIF "," графика / img0.gif "," графика / img1.gif "," графика / img2.gif ','
графики / img3.gif "," графични / img4.gif '];

функция start () {
нов mq ('m1', mqAry1,60);
нов mq ('m2', mqAry2,60); // повторете за толкова горива, колкото е необходимо
mqRotate (mqr); // трябва да излезе последно
}
window.onload = старт;

// Маркиране на непрекъснато изображение
// авторски права 24 юли 2008 г. от Стивън Чапман
// http://javascript.about.com
// е разрешено използването на този Javascript на вашата уеб страница
// при условие, че целият код по-долу в този скрипт (включително и този)
// коментари) се използва без промяна

Var
mqr = []; функция
mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit =
this.mqo.style.height; this.mqo.onmouseout = функция ()
{mqRotate (mqr);}; this.mqo.onmouseover = функция ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length;
за (вар
I = 0; иthis.mqo.ary [Ь] .src = матрични [Ь]; this.mqo.ary [i] .style.position =
"Абсолютна"; 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 (mqr) {if (! mqr) връщане; за (var j = mqr.length - 1; к
> -1; j--) {maxa = mqr [j] .ary.length; за (var i = 0; imqr [й] .ary [Ь] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [й] .ary [0] .style; ако (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);}

След това добавете следния код в секцията на главата на вашата страница:

Трябва да добавим команда за лист със стилове, за да определим как ще изглежда всеки от нашите марки.

Ето кода, който използвахме за тези на примерната страница:

.marquee {позиция: относителна;
преливник: скрит;
ширина: 500px;
височина: 60px;
рамка: плътно черна 1px;
}

Можете да промените всяко от тези свойства за вашия маркер; обаче трябва да остане позиция: относителна.

Можете да го поставите във вашия външен стилов лист, ако имате такъв, или да го прикрепите между него тагове в главата на страницата ви.

Следващата стъпка е да определите div в своята уеб страница, където ще поставите маркера от изображения.

Първият от примерните маркери използва този код:

Класът свързва това с кода на таблицата на стиловете, докато id е това, което ще използваме в новия mq () призив, за да прикрепим маркера от изображения.

Последното нещо, което трябва да направите, за да съберете всичко това е да се уверите, че вашият код за добавяне на mq обекта във вашия JavaScript, след като страницата зарежда съдържа правилните стойности.

Ето как изглежда едно от примерните изявления:

нов mq ('m1', mqAry1,60);

• M1 е идентификаторът на нашия div tag, който ще показва маркера.
• mqAry1 е препратка към масив от изображения, които ще бъдат показани в маркера.
• Крайната стойност 60 е ширината на нашите изображения (изображенията ще се превъртат от дясно на ляво и така височината е същата, както сме дефинирали в таблицата със стилове).

За да добавим допълнителни маркировки, просто настройваме допълнителни масиви от изображения, допълнителни divs в нашия HTML, евентуално настроени допълнителни класове, така че да стилизираме маркировките по различен начин и да добавим колкото се може повече нови изрази mq () шатри. Просто трябва да сме сигурни, че повикването mqRotate () следва тях, за да управлява маркерите за нас.

Има само две промени, които трябва да направите, за да превърнете изображенията в маркера във връзки.

Първо, променете своя масив от изображения от масив от изображения в масив от масиви, където всеки от вътрешните масиви се състои от изображение в позиция 0 и адреса на връзката в позиция 1.

var mqAry1 = [
[ 'Графики / img0.gif "," blcmarquee1.htm "],
[ 'Графики / img1.gif "," blclockm1.htm'], ...
['graphics / img14.gif', 'bltypewriter.htm']];

Второто нещо, което трябва да направите, е да замените следното за основната част на скрипта:

// Маркиране на непрекъснато изображение с връзки
// авторски права 21 септември 2008 г. от Стивън Чапман
// http://javascript.about.com
// е разрешено използването на този Javascript на вашата уеб страница
// при условие, че целият код по-долу в този скрипт (включително и този)
// коментари) се използва без промяна
var mqr = []; функция mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit = this.mqo.style.height; this.mqo.onmouseout = функция () {mqRotate (mqr);}; this.mqo.onmouseover = function () {clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length; за (var i = 0; i -1; j--) {maxa = mqr [j] .ary.length; за (var i = 0; i

Останалото от това, което трябва да направите, е същото, както е описано за версията на маркера без връзките.