JS na zmenu obrazku po par sekundach

Programovacie jazyky, rady, poradňa...
simusko
Amateur
Amateur
Príspevky: 13
Registrovaný: 11 júl 2009, 10:04

JS na zmenu obrazku po par sekundach

Príspevok od používateľa simusko »

Zdravim vsetkych,
potreboval by som poradit so scriptom...
Potrebujem script do HTML, ktory by mi menil obrazky, teda aj s odkazmi (<a href ...) po urcitych casovych intervaloch, napriklad 5 sekund.

Ma niekto s niecim podobnym skusenosti, alebo vie poradit prosim?

Vopred Dakujem kazdemu ochotnemu :)
ehm123
King
King
Príspevky: 1658
Registrovaný: 27 feb 2006, 6:45
Bydlisko: PD / Praha

Príspevok od používateľa ehm123 »

pozri si kniznicu jquery.
simusko
Amateur
Amateur
Príspevky: 13
Registrovaný: 11 júl 2009, 10:04

Príspevok od používateľa simusko »

hm.. prepac.. ale kde? :oops:
chrono
VIP
VIP
Používateľov profilový obrázok
Príspevky: 7127
Registrovaný: 25 dec 2006, 15:17

Príspevok od používateľa chrono »

http://www.google.com/search?q=jquery&ie=UTF-8&oe=UTF-8 (ale jQuery v tomto prípade nebude veľká výhoda, keďže tam stačí nejaký časovač a nejaké pole s tými obrázkami)
simusko
Amateur
Amateur
Príspevky: 13
Registrovaný: 11 júl 2009, 10:04

Príspevok od používateľa simusko »

a nevies mi poradit teda s niecim nie zbytocne komplikovanym?
audiotrack
VIP
VIP
Používateľov profilový obrázok
Príspevky: 25958
Registrovaný: 09 sep 2005, 18:39
Kontaktovať používateľa:

Príspevok od používateľa audiotrack »

do head daj

Kód: Vybrať všetko

function zmena(i) {

var obrazky = new Array('obr1.jpg', 'obrazok2.gif', 'banner.png');
var odkazy = new Array('http://www.google.com', 'http://www.hojko.com', 'nejakastranka.html');

    document.getElementById('obrazok').src=obrazky[i];
    document.getElementById('odkaz').href=odkazy[i++];
    if(i==obrazky.length || i==odkazy.length) i=0;
    setTimeout('zmena(i)', 5000);
}
a potom ti treba

Kód: Vybrať všetko

<a href='' id='odkaz'><img src='' id='obrazok' /></a>
hadam som sa nepreklepol, písal som teraz z hlavy
chrono
VIP
VIP
Používateľov profilový obrázok
Príspevky: 7127
Registrovaný: 25 dec 2006, 15:17

Príspevok od používateľa chrono »

To audiotrackove dielo treba mierne upraviť:

Kód: Vybrať všetko

function zmena(i) {
	var obrazky = new Array('tvr1.png', 'tvr2.png', 'tvr3.png');
	var odkazy = new Array('http://www.google.com', 'http://www.hojko.com', 'nejakastranka.html');

	document.getElementById('obrazok').src=obrazky[i];
	document.getElementById('odkaz').href=odkazy[i++];
	if (i==obrazky.length || i==odkazy.length) i=0;
	setTimeout(zmena, 5000, i);
}
A niekde v onload (prípadne ešte lepšie v udalosti, ktorá je vygenerovaná po spracovaní DOM) by si mal dať volanie zmena(0);
simusko
Amateur
Amateur
Príspevky: 13
Registrovaný: 11 júl 2009, 10:04

Príspevok od používateľa simusko »

velmi si vazim tvoju pomoc, ale aby som to objasnil.. s js neviem takmer nic a bohuzial si neviem pomoct v tomto pripade viac ako len skopirovat a hodit to medzi tagy <script>...
moc som nepochopil ten onload a az by si bol taky mily ze by si to napisal tak aby to stacilo len nahodit na stranku, alebo trosku obsirnejsie a viac ako pre debila napisat ako to mam vlastne upravit :D

Dakujem
audiotrack
VIP
VIP
Používateľov profilový obrázok
Príspevky: 25958
Registrovaný: 09 sep 2005, 18:39
Kontaktovať používateľa:

Príspevok od používateľa audiotrack »

do html, kde máš <body> dopíš ešte onload='zmena(0)' takže to bude

Kód: Vybrať všetko

<body onload='zmena(0)'>
alebo to daj na spodok stránky pred </body> takto

Kód: Vybrať všetko

<script>zmena(0)</script>

tú funkciu čo som písal vyššie (resp. to čo ma chrono opravil) daj medzi <script> a </script> do hlavičky (teda niekde medzi <head> a </head>) a ten jeden riadok čo som napísal pod tou funkciou daj tam, kde chceš aby sa ti tie obrázky menili
simusko
Amateur
Amateur
Príspevky: 13
Registrovaný: 11 júl 2009, 10:04

Príspevok od používateľa simusko »

mno tak takto to vyzera:

Kód: Vybrať všetko

<html>
<head>
<title>test</title>
</head>

<body onload='zmena(0)'>
...<br>

<script>
function zmena(i) { 

var obrazky = new Array('dion.jpg', 'excite.jpg', 'mita.jpg'); 
var odkazy = new Array('http://www.google.com', 'http://www.hojko.com', 'http://www.jm-design.sk'); 

    document.getElementById('obrazok').src=obrazky[i]; 
    document.getElementById('odkaz').href=odkazy[i++]; 
    if(i==obrazky.length || i==odkazy.length) i=0; 
    setTimeout('zmena(i)', 5000); 
}
</script>

</body>
</html>
je to na stranke

Kód: Vybrať všetko

http://www.jm-design.sk/test/test.html
a nefunguje to.. :(
audiotrack
VIP
VIP
Používateľov profilový obrázok
Príspevky: 25958
Registrovaný: 09 sep 2005, 18:39
Kontaktovať používateľa:

Príspevok od používateľa audiotrack »

Kód: Vybrať všetko

<html>
<head>
<title>test</title>
<script>
var i=0;
function zmena() {

var obrazky = new Array('dion.jpg', 'excite.jpg', 'mita.jpg')
var odkazy = new Array('http://www.google.com', 'http://www.hojko.com', 'http://www.jm-design.sk');
    document.getElementById('obrazok').src=obrazky[i];
    document.getElementById('odkaz').href=odkazy[i++];
    if(i==obrazky.length || i==odkazy.length) i=0;
    
    setTimeout('zmena()', 5000);
}
</script>
</head>

<body>
...<br>

<a href='' id='odkaz'><img src='' id='obrazok' /></a>
<script>
zmena();
</script>

</body>
</html>
simusko
Amateur
Amateur
Príspevky: 13
Registrovaný: 11 júl 2009, 10:04

Príspevok od používateľa simusko »

:happyrespect: si king ;) diki moc

//autoeditácia príspevku ( 13 Jul 2009, 13:43 )
a este jednu malu prosbu.. aby sa to generovalo nahodne? :D
audiotrack
VIP
VIP
Používateľov profilový obrázok
Príspevky: 25958
Registrovaný: 09 sep 2005, 18:39
Kontaktovať používateľa:

Príspevok od používateľa audiotrack »

omg, milujem ľudí ktorí nevedia čo chcú..

Kód: Vybrať všetko

<html>
<head>
<title>test</title>
<script>
function zmena() {
var obrazky = new Array('dion.jpg', 'excite.jpg', 'mita.jpg');
var odkazy = new Array('http://www.google.com', 'http://www.hojko.com', 'http://www.jm-design.sk');
var i = Math.ceil((obrazky.length+1)*Math.random())-1;
    document.getElementById('obrazok').src=obrazky[i];
    document.getElementById('odkaz').href=odkazy[i];
  
    setTimeout('zmena()', 5000);
}
</script>
</head>

<body>
...<br>

<a href='' id='odkaz'><img src='' id='obrazok' /></a>
<script>
zmena();
</script>

</body>
</html>
simusko
Amateur
Amateur
Príspevky: 13
Registrovaný: 11 júl 2009, 10:04

Príspevok od používateľa simusko »

sory... DIKI este raz
Napísať odpoveď