Ово ЈаваСцрипт ствара помични оквир у којем се слике слике хоризонтално крећу кроз подручје приказа. Како свака слика нестаје кроз једну страну подручја приказа, она се чита на почетку серије слика. Ово ствара континуирано померање слика у оквиру који се петља - све док имате довољно слика да испуните ширину подручја приказа марке.
Ова скрипта ипак има неколико ограничења:
- Слике су приказане у истој величини (и ширине и висине). Ако слике нису физички исте величине, све ће се величине промијенити. Ово може резултирати лошим квалитетом слике, па је најбоље да доследно величите изворне слике.
- Висина слика мора одговарати висини постављеној за цртеж, у супротном, слике ће бити промењене са истим потенцијалом за горе наведене лоше слике.
- Ширина слике помножена са бројем слика мора бити већа од ширине оквира. Најлакше решење за то ако нема довољно слика је само поновити слике у низу да бисте попунили празнину.
- Једина интеракција коју ова скрипта нуди је заустављање померања током померања миша преко оквира и настављање када миш помера слику. Касније ћемо описати модификацију која се може извршити за претварање свих слика у везе.
- Ако на страници имате више маркизама, све се покрећу истом брзином, па ће превртање било којег од њих узроковати да се сви престану кретати.
- Потребне су вам ваше слике. Они у примерима нису део ове скрипте.
Имаге Маркуее ЈаваСцрипт Цоде
Прво, копирајте следећи ЈаваСцрипт и сачувајте га као маркуее.јс.
Овај код садржи два сликовна поља (за две марке на примеру странице), као и два нова мк објекта који садрже информације које ће се приказати на те две марке.
Можете избрисати један од тих објеката и променити други тако да приказује једну континуирану марку на вашој страници или поновите те изјаве да бисте додали још марки.
Функција мкРотате мора бити позвана пролази мкр након што су марке дефиниране као оне које ће управљати ротацијама.
вармкАри1 = ['грапхицс / имг0.гиф', 'грапхицс / имг1.гиф', 'грапхицс / имг2.гиф', '
грапхицс / имг3.гиф ',' грапхицс / имг4.гиф ',' грапхицс / имг5.гиф ',' грапхицс /
имг6.гиф ',' грапхицс / имг7.гиф ',' грапхицс / имг8.гиф ',' грапхицс / имг9.гиф ',
'грапхицс / имг10.гиф', 'грапхицс / имг11.гиф', 'грапхицс / имг12.гиф', '
грапхицс / имг13.гиф ',' грапхицс / имг14.гиф '];
вар
мкАри2 = ['грапхицс / имг5.гиф', 'грапхицс / имг6.гиф', 'грапхицс / имг7.гиф', '
грапхицс / имг8.гиф ',' грапхицс / имг9.гиф ',' грапхицс / имг10.гиф ',' грапхицс /
имг11.гиф ',' грапхицс / имг12.гиф ',' грапхицс / имг13.гиф ',' грапхицс / имг14.
гиф ',' грапхицс / имг0.гиф ',' грапхицс / имг1.гиф ',' грапхицс / имг2.гиф ','
грапхицс / имг3.гиф ',' грапхицс / имг4.гиф '];
функција старт () {
нови мк ('м1', мкАри1,60);
нови мк ('м2', мкАри2,60); // поновити за онолико фуја колико је потребно
мкРотате (мкр); // мора доћи задњи
}
виндов.онлоад = старт;
// Континуирана слика
// ауторска права 24. јула 2008. Степхен Цхапман
// http://javascript.about.com
// дозвола за коришћење овог Јавасцрипта на вашој веб страници је дата
// под условом да сав код наведен у овој скрипти (укључујући ову
// коментари) се користи без икаквих преинака
вар мкр = []; функција
мк (ид, ари, вид) {тхис.мко = доцумент.гетЕлементБиИд (ид); вар хеит =
тхис.мко.стиле.хеигхт; тхис.мко.онмоусеоут = функција ()
{мкРотате (мкр);}; тхис.мко.онмоусеовер = функција ()
{цлеарТимеоут (мкр [0] .ТО);}; тхис.мко.ари = []; вар макв = ари.ленгтх;
фор (вар
и = 0; итхис.мко.ари [и] .срц = арри [и]; тхис.мко.ари [и] .стиле.поситион =
'апсолутна'; тхис.мко.ари [и] .стиле.лефт = (вид * и) + 'пк';
тхис.мко.ари [и] .стиле.видтх = вид + 'пк'; тхис.мко.ари [и] .стиле.хеигхт =
хеит; тхис.мко.аппендЦхилд (тхис.мко.ари [и]);} мкр.пусх (тхис.мко);}
функција мкРотате (мкр) {иф (! мкр) ретурн; за (вар ј = мкр.ленгтх - 1; ј
> -1; ј--) {мака = мкр [ј] .ари.ленгтх; за (вар и = 0; имкр [ј] .ари [и] .стиле; к.лефт = (парсеИнт (к.лефт, 10) -1) + 'пк';} вар и =
мкр [ј] .ари [0] .стиле; иф (парсеИнт (и.лефт, 10) + парсеИнт (и.видтх, 10) <0)
{вар з = мкр [ј] .ари.схифт (); з.стиле.лефт = (парсеИнт (з.стиле.лефт) +
парсеИнт (з.стиле.видтх) * мака) + 'пк'; мкр [ј] .ари.пусх (з);}}
мкр [0] .ТО = сетТимеоут ('мкРотате (мкр)', 10);}
Затим додајте следећи код у главни део своје странице:
Додајте команду таблице стила
Морамо додати команду стилског листа да бисмо дефинисали како ће изгледати свака наша марка.
Ево кода који смо користили за оне на примеру странице:
.маркуее {положај: релативан;
прелив: скривен;
ширина: 500пк;
висина: 60пк;
обруб: чврста црна 1пк;
}
Можете да промените било које од ових својстава за вашу марку; међутим, мора остати положај: релативан.
Можете га поставити у листу спољних стилова ако га имате или га приложити између ознаке у глави странице.
Дефинишите где ћете поставити маркизу
Следећи корак је дефинисање див-а на вашој веб страници где ћете поставити оквир слике.
Прва од примерних маркиза користила је овај код:
Класа то повезује са шифром стилова, док је ид оно што ћемо користити у новом позиву мк () да причврстимо оквир слике.
Обезбедите да ваш код садржи праве вредности
Завршна ствар коју требате саставити је да осигурате да ваш код за додавање мк објекта у ваш ЈаваСцрипт након што се страница учита садржи исправне вредности.
Ево како изгледа једна од примјера изјава:
нови мк ('м1', мкАри1,60);
- М1 је ид наше див ознаке која ће приказати маркицу.
- мкАри1 је референца на низ слика које ће се приказати у оквиру.
- Коначна вредност 60 је ширина наших слика (слике ће се кретати с десна на лево, тако да је висина иста као што смо дефинисали у стилу).
За додавање додатних марки смо само поставили додатне низове слика, додатне див-ове у нашем ХТМЛ-у, евентуално и поставили додатне класе да бисмо другачије стилизовали марке и додали онолико нових мк () изјава колико имамо маркуеес. Само се морамо осигурати да их позив мкРотате () прати да би управљао ознакама за нас.
Прављење слика маркета у везе
Потребне су само две промене да бисте слике на слици поставили у везе.
Прво промијените свој сликовни низ из низа слика у низ матрица гдје се сваки унутарњи низ састоји од слике у положају 0 и адресе везе у положају 1.
вар мкАри1 = [
['грапхицс / имг0.гиф', 'блцмаркуее1.хтм'],
['грапхицс / имг1.гиф', 'блцлоцкм1.хтм'], ...
['грапхицс / имг14.гиф', 'блтипевритер.хтм']];
Друга ствар коју треба да урадите је да замените следеће за главни део скрипте:
// Континуирана слика са везама
// ауторска права 21. септембра 2008. аутор Степхена Цхапмана
// http://javascript.about.com
// дозвола за коришћење овог Јавасцрипта на вашој веб страници је дата
// под условом да сав код наведен у овој скрипти (укључујући ову
// коментари) се користи без икаквих преинака
вар мкр = []; функција мк (ид, ари, вид) {тхис.мко = доцумент.гетЕлементБиИд (ид); вар хеит = тхис.мко.стиле.хеигхт; тхис.мко.онмоусеоут = фунцтион () {мкРотате (мкр);}; тхис.мко.онмоусеовер = фунцтион () {цлеарТимеоут (мкр [0] .ТО);}; тхис.мко.ари = []; вар макв = ари.ленгтх; за (вар и = 0; и
Остатак онога што требате учинити остаје исто као што је описано за верзију пакета без веза.