Autor | Zpráva | ||
---|---|---|---|
Vision Profil * |
#1 · Zasláno: 8. 8. 2015, 16:47:55
Ahoj mozci,
mám tu velký problém. Nedokážu pochopit jednu věc níže, ale zatím teda kód. <script language="JavaScript" type="text/javascript"> obr = -1; cas = 1000; function animation(){ obrazky = ["url(images/slide_1.png)", "url(images/slide_2.png)"]; if (obr+1==obrazky.length) obr=0; else obr++; obrazek.style.backgroundImage = obrazky[obr]; window.setTimeout('animation()',cas); } </script> tenhle script bych chtel napasovat do divu sem <div name="obrazek" id="slider" style="background-image: url(images/slide_1.png)">Text</div> Onload na vyvolání funkce mám v body. Je zajímavě, že když ty samé hodnoty dám do IMG místo DIV, tak fungují na stopro, ale v divu se nic neděje. Nevíte někdo co s tím? Znám hodně alternativ, ale ve věci ve které to potřebuji, potřebuji aby se měnil po uplynutí jedné vteřiny obrázek na pozadí daného divu a furt dokola, dle nahraných obrázků. Prosím tedy o pomoc. Děkuji |
||
Chamurappi Profil |
#2 · Zasláno: 8. 8. 2015, 17:10:51
Reaguji na Visiona:
Element <div> nemá atribut name , nejde ho přes něj vyhledat. Použij místo obrazek.style raději document.getElementById("slider").style .
A také bych na tvém místě používal var .
|
||
Vision Profil * |
#3 · Zasláno: 8. 8. 2015, 19:11:30
Zkousel jsem, ale problem se nevyresil. To byla prvni z veci, kterou jsem na googlu objevil, ale na div mi to proste nefunguje. Jeste jsem nasel, ze pred scriptem musi byt nacteny includy jquery, ze to nebude fungovat jinak, ale to mam take v poradku. Nejake dalsi napady?
|
||
_es Profil |
#4 · Zasláno: 8. 8. 2015, 19:27:22
|
||
quatzael Profil |
Vision:
Já nevím co tam řešíš s jQuery, to tady v tý ukázce ani nemáš.. Podle mě by to mělo být takto: <script type="text/javascript"> obr = -1; cas = 1000; function animation(){ obrazky = ["url('images/slide_1.png')", "url('images/slide_2.png')"]; if (obr+1==obrazky.length) obr=0; else obr++; document.getElementById("slider").style.backgroundImage = obrazky[obr]; } window.setTimeout(animation,cas); </script> <div id="slider" style="background-image: url('images/slide_1.png')">Text</div> Chyběly Ti tam ty uvozovky. A taky to volání tý funkce se podle mě nedělá zevnitř funkce, ale zvenčí.. (Ale to si nejsem jistej, když Ti to Chamurappi nijak nezkritizoval.. |
||
juriad Profil |
#6 · Zasláno: 8. 8. 2015, 23:06:36
quatzael:
Nechyběly. Nejsou povinné. CSS zbytečnosti » Uvozovky kolem URL/písem Ne, funkce musí naplánovat sama sebe. Vision zmiňuje, že ji volá poprvé v body onload. Správně jsi opravil ten 8. řádek. Vision: Dej si alert na začátek té funkce animation. Tím zjistíš, zda se vůbec zavolá. |
||
Vision Profil * |
#7 · Zasláno: 9. 8. 2015, 01:19:07
Dobrej napad s tim alertem, hned vyzkousim doma, ten osmej radek jsem opravil ,ale nic se nedelo. Pak dam echo, ale dekuji vsem za pomoc a snahu. Snad to vse vyresime.
|
||
Vision Profil * |
#8 · Zasláno: 9. 8. 2015, 18:23:45
Tak problém vyřešen vyměnil jsem muj element "<script language="JavaScript" type="text/javascript">" za element od quatzaela "<script type="text/javascript">" a už to běží jak má. Děkuji všem za pomoc.
|
||
Chamurappi Profil |
#9 · Zasláno: 9. 8. 2015, 18:50:05
Reaguji na Visiona:
To nemohla být příčina chyby, language="JavaScript" je zcela neškodný. Nehledě na to, že oba atributy jsou zbytečné.
„Jeste jsem nasel, ze pred scriptem musi byt nacteny includy jquery“ (z [#3]) Nemusí, nepoužíváš jQuery, přilinkování knihovny by ti jen zpomalilo stránku. |
||
Vision Profil * |
#10 · Zasláno: 9. 8. 2015, 19:24:57
Chamurappi:
mám tam jquery na effekty fadein a fadeout |
||
Vision Profil * |
#11 · Zasláno: 10. 8. 2015, 00:00:20
function slider(element, url, count, suffix) { var current = 1; var div = $('<div>'); document.getElementById("slider").style.background = 'url(' + url + current + suffix + ')'; function changeImage() { $( "#slider" ).fadeOut(500, function() { current = current % count + 1; document.getElementById("slider").style.background = 'url(' + url + current + suffix + ')'; $( "#slider" ).fadeIn(1000); }); } setInterval(changeImage, 5000); } slider($('#slider'), 'http://www.diamond-cabaret.com/images/slide_', 2, '.png'); <div id="slider" style="background: url(images/slide_1.png);"></div> Všechno funguje jak má, ale nenačte se do backgroundu URL, píše to url("undefinedNaNundefined") Nevíte včem je problém? |
||
Časová prodleva: 5 dní
|
|||
juriad Profil |
Mně to funguje, viz Odkaz. Proč tobě ne? Dodej živou ukázku, zřejmě děláš něco blbě.
|
||
Vision Profil * |
#13 · Zasláno: 14. 8. 2015, 16:44:07
http://www.diamond-cabaret.com/
živá ukázka |
||
juriad Profil |
Problém víceméně není se samotným kódem, ale tím, jak jej používáš. A to bez odkazu na stránku nelze vyřešit.
Odstraň onload="slider()" z body. To tam nemá vůbec co dělat. To jen způsobuje ty problémy s undefinedNaNundefined .
Do slider.js dej přesně: function slider(element, url, count, suffix) { var timeToFadeOut = 500; var timeToFadeIn = 1000; var timeToChange = 5000; var current = 1; function changeImage() { element.fadeOut(timeToFadeOut, function() { current = current % count + 1; element.css('background', 'url(' + url + current + suffix + ')'); element.fadeIn(timeToFadeIn); }); } setInterval(changeImage, timeToChange); } $(document).ready(function() { var numberOfImages = 2; slider($('#slider'), '/images/slide_', numberOfImages, '.png'); }); A div#slider bys měl napevno pomocí style="background: url(/images/slide_1.png)" nastavit první obrázek, který uvidí všichni bez JavaScriptu.
|
||
Vision Profil * |
#15 · Zasláno: 15. 8. 2015, 14:42:02 · Upravil/a: Vision
Funguje to skvěle a moc děkuji, ale jestli můžu poprosit o popis, zkusím si to popsat sám, abych měl pochopení v kódu.
function slider(element, url, count, suffix) { //funkce s názvem slider(promena1,promena2,promena3,promena4) var timeToFadeOut = 500; //promena s casek cca 0,5s var timeToFadeIn = 1000; //promena s casem cca 1s var timeToChange = 5000; //promena s casem cca 5s var current = 1; //pocatecni hodnota promeny je 1 function changeImage() { //ve funkci slider je funkce na zmenu obrazku element.fadeOut(timeToFadeOut, function() { //dle promene element ve funkci slider, se v danem elementu udela fadeout effect current = current % count + 1; //tuhle rovnici moc nechapu, ale myslim si ze dokad se promena curent nebude rovnat poctu promene count, bude pri opakovani pricitat promene current hodnotu jedna element.css('background', 'url(' + url + current + suffix + ')'); //zmena stylu v css dle hodnot v teto promene, zmena se provede v udane promene elementu element.fadeIn(timeToFadeIn); //dle promene element ve funkci slider, se v danem elementu udela fadein effect dle nastaveneho casu }); } setInterval(changeImage, timeToChange); // nastavime cas (smycku), po ktere se bude funkce changeimage opakovat } $(document).ready(function() { //timhle vasi vyvolam funkci misto toho onload v body var numberOfImages = 2; // pocet obrazku celkem slider($('#slider'), '/images/slide_', numberOfImages, '.png'); // funkce slider(promena element, promena url, promena count, promena pripony) }); Potřeboval bych ještě funkce prew a next. U nextu asi stačí vyvolat funkci changeImage() na obrázku elementem <a> pomocí onclick. Ale nevím jak u prev. Můžu vyměnit hodnotu +1 za -1, ale jakmile se dostanu na 1, tak potřebuju udělat, aby se vrátil na posledni obrázek, tedy mi proměná nyní půjde do mínusu a dané obrázky budou nenalezeny. Plus potřebuju, aby funkce slider vyrobila v divu s id "count" (dle promene numberOfImages) počet stejných obrázků "/images/icon_grey.png" s odkazy na přepnutí na obrázek s přesnou hodnotou proměné "current". Pokud current se bude rovnat s obrázkem č.2 bude mít změnu obrázku na "/images/icon_active.png". |
||
juriad Profil |
Popsal jsi to dobře.
Plná ukázka všeho včetně tlačítek. Dost jsem ji upravil (hlavně, jak se pracuje s těmi obrázky a časem; obrázky jsou číslované od 0). Živá ukázka Ten operátor %, říká se mu modulo, bys měl znát z hodin matematiky, je to obyčejný zbytek po dělení. A jistě víš, že zbytky po dělení číslem 5 jsou čísla v rozdahu 0 až 4. Není-li ti něco jasného, zeptej se. |
||
Vision Profil * |
#17 · Zasláno: 15. 8. 2015, 18:05:06
Děkuji, že se mi takhle moc věnujete. Je to pro mě dost užitkové. Hodiny javascriptu jentak někdo nedává. Děkuji.
|
||
Časová prodleva: 10 let
|
0