(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi |
|
Alati teme | Način prikaza |
11. 10. 2012. | #1 |
član
Certified
Datum učlanjenja: 06.09.2012
Poruke: 64
Hvala: 0
342 "Hvala" u 10 poruka
|
Vezano za JavaScript kod
Pozdrav svima, imam mali problem posto sam skoro poceo proramiranje u JavaScript-u pa mi je neophodna pomoc. Za prvu stranicu HTML-a, na index stranice neophodno mi je da se slike pojavljuju jedna za drugom ali svaka slika da se pojavi za 3-5 sekunde posle pojavljivanja druge, kada se pojavi zadnja slika to je to tako ostaje nama ponovnog prikazivanja (slike se prikazuju samo prilikom otvaranje index strane ili refresovanje). Guglao sam i uradio kod ali ne ide mi nesto, molim za pomoc spravku koda ili kod koji ce raditi. Kod je koji sam uradio je:
script type="text/javascript"> (function() { var rotator = document.getElementById('rotator'); var imageDir = 'images/'; / var delayInSeconds = 5; // list image names var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg']; var num = 0; var changeImage = function() { var len = images.length; rotator.src = imageDir + images[num++]; if (num == len) { num = 0; } }; setInterval(changeImage, delayInSeconds * 1000); })(); </script> Ovaj kod mi prikaze sve slike i promeni prvu sliku sa zadnjom posle |
11. 10. 2012. | #2 |
banned
Professional
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
|
__________________
Don't look at me; I'm lost too. “If you can't dazzle them with brilliance, baffle them with bul*s**t.” |
11. 10. 2012. | #3 | |
Ivan Dilber
Sir Write-a-Lot
|
Trebaju ti 2 izmene:
Citat:
__________________
Leadership is the art of getting people to want to do what you know must be done. |
|
11. 10. 2012. | #4 |
član
Certified
Datum učlanjenja: 06.09.2012
Poruke: 64
Hvala: 0
342 "Hvala" u 10 poruka
|
Probao sam ne radi i dalje mi prikazuje sve slike odjednom, evo celog koda s HTML-om
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script type="text/javascript"> (function() { var rotator = document.getElementById('photo'); var imageDir = 'images/'; var delayInSeconds = 5; // list image names var images = ['dukes.png', 'sl1.png','logo01.png']; var num = 0; var changeImage = function() { var len = images.length; rotator.src = imageDir + images[num++]; if (num == len) { clearInterval(rotateInterval); } }; var rotateInterval = setInterval(changeImage, delayInSeconds * 1000); })(); </script> </head> <body> <img src="images/dukes.png" id="photo"> <br> <img src="images/log01.png" id="photo"><br> <img src="images/sl1.png" id="photo"> </body> </html> |
11. 10. 2012. | #5 |
emperor Selassie
Grand Master
|
Ovako na brzinu što mogu da primetim:
1) Ove slike već imaju src atribut u HTML kodu tako da će se slike učitati odmah nezavisno od JS-a 2) Imaš više elemenata sa istim ID-em, a to nije dozvoljeno |
11. 10. 2012. | #6 |
banned
Professional
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
|
U html kodu su ti definisane sve slike (3 img html taga sa istim id atributom), ostavi samo jednu prvu, zatim potrebno je da sačekaš da se stranica učita, nešto kao:
Kôd:
window.addEventListener('load', function() { // ovde dolazi tvoj js kod }); Kôd:
window.onload = function() { // ovde dolazi tvoj js kod }; edit: preteče me Nemanja, nisam proveravao da li ima novih poruka
__________________
Don't look at me; I'm lost too. “If you can't dazzle them with brilliance, baffle them with bul*s**t.” Poslednja izmena od Br@nkoR : 11. 10. 2012. u 17:10. |
13. 10. 2012. | #7 |
član
Certified
Datum učlanjenja: 06.09.2012
Poruke: 64
Hvala: 0
342 "Hvala" u 10 poruka
|
i dalje imam problem kad hocu vise slika da prikazem u nizu, kad napisem kod za svaku sliku posebno sa posebnim id-em radi, hvala u svakom slucaju,
|
13. 10. 2012. | #8 |
banned
Professional
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
|
Sad mi nije jasno, da li je tebi potrebno ovo:
HTML kôd:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function() { var rotator = document.getElementById('photo'); var imageDir = 'images/'; var delayInSeconds = 5; var images = ['sl1.png','logo01.png']; var num = 0; var changeImage = function() { var len = images.length; rotator.src = imageDir + images[num++]; if (num == len) { clearInterval(rotateInterval); } }; var rotateInterval = setInterval(changeImage, delayInSeconds * 1000); } </script> </head> <body> <img src="images/dukes.png" id="photo" /> </body> </html> HTML kôd:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style> .photo { display: none; } </style> <script type="text/javascript"> window.onload = function() { var images = document.getElementsByClassName('photo'); var delayInSeconds = 5; var current = 0; images[0].style.display = 'inline-block'; setTimeout(function() { current++; images[current].style.display = 'inline-block'; if(current < images.length - 1) { setTimeout(arguments.callee, delayInSeconds * 1000); } }, delayInSeconds * 1000); } </script> </head> <body> <img src="images/dukes.png" class="photo" /> <img src="images/sl1.png" class="photo" /> <img src="images/logo01.png" class="photo" /> </body> </html>
__________________
Don't look at me; I'm lost too. “If you can't dazzle them with brilliance, baffle them with bul*s**t.” |
13. 10. 2012. | #9 |
expert
Grand Master
Datum učlanjenja: 11.04.2010
Poruke: 998
Hvala: 141
959 "Hvala" u 153 poruka
|
(ノಠ益ಠ)ノ彡┻━┻
|
14. 10. 2012. | #10 |
emperor Selassie
Grand Master
|
Off Topic: vrati astal gde je bio |
Alati teme | |
Način prikaza | |
|
|