[ Príspevkov: 6 ] 
AutorSpráva
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 05.03.10
Prihlásený: 17.05.13
Príspevky: 5
Témy: 2 | 2
Bydlisko: Pezinok
NapísalOffline : 11.03.2010 17:36 | JS zmena image

Zdravím všetkých,
už tretí deň sa snažím javascriptom docieliť aby sa obrazok na stranke každých 10 sekúnd menil. Dokopy sa majú meniť štyri obrázky a to cyklicky donekonečna.

funkcia go() je spúšťaná pomocou body onload a cele sa to ma uskutočniť v <div id=obrazok></div>

tu je moje doterajšie snaženie
Kód:
var obrazok1="blabla1.jpg",obrazok2="blabla2.jpg",obrazok3="blabla3.jpg",obrazok4="blabla4.jpg";
var i=1;


function go()
{
document.getElementById('obrazok').removeChild(document.getElementById('obrazok').childNodes[0]);

var obr=document.createElement("img");
var modulus=i%4;

if(modulus<=5)
{
 switch (i)
{
 case 1:
 {
  obr.setAttribute("src",obrazok1);
 }
 case 2:
 {
  obr.setAttribute("src",obrazok2);
 }
 case 3:
 {
  obr.setAttribute("src",obrazok3);
 }
 case 4:
 {
  obr.setAttribute("src",obrazok4);
 }
}
else
{
 switch (modulus)
 case 1:
 {
  obr.setAttribute("src",obrazok1);
 }
 case 4:
 {
  obr.setAttribute("src",obrazok2);
 }
 case 3:
 {
  obr.setAttribute("src",obrazok3);
 }
 case 0:
 {
  obr.setAttribute("src",obrazok4);
 }


i++
document.getElementById('obrazok').appendChild(obr);
window.setTimeout("go()",10000);
}


za každú pomoc som dopredu vďačný


Offline

Čestný člen
Čestný člen
JS zmena image

Registrovaný: 11.08.07
Príspevky: 4088
Témy: 34 | 34
Bydlisko: Brno
NapísalOffline : 11.03.2010 17:41 | JS zmena image

A co tak jednoducho - vytvoris si objekt (cize premennu) toho <img> elementu. Pomocou setInterval sa bude dookola opakovat taka fcia, ktora jednoducho zmeni src. Ziadne removeChild, ziadna rekurzia.
Mimochodom - pouzivat ako prvy parameter setTimeoutu alebo setIntervalu retazec, no fuj. :) Nauc sa pouzivat anonymne fcie:
Kód:
setInterval(function(){
   //cely kod
}, 10000);

Ak bude nejaky problem, hod sem tvoj pokus o riesenie a pomozeme opravit.
Inak tebe moze robit problem skor to, ze zle pouzivas vetvu switch.


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 05.03.10
Prihlásený: 17.05.13
Príspevky: 5
Témy: 2 | 2
Bydlisko: Pezinok
Napísal autor témyOffline : 11.03.2010 18:23 | JS zmena image

tak som sa s tým trochu pohral, stále to síce nefunguje ale už to vyzerá v lepšom stave. btw. mohol by si mi vysvetliť pojem anonymne fcie? neviem sa k tomu dopátrať, dokonca ani všemocný Google mi nepomohol :-)

Kód:
var obrazok1="X41.jpg",obrazok2="X42.jpg",obrazok3="X43.jpg",obrazok4="X44.jpg";
var i=1;


intervalID = setInterval(function(){
 var modulus=i%4;
 var obr=document.createElement("img");

 if(modulus<5)
 {
  switch (i)
   {
    case 1:
     obr.setAttribute("src",obrazok1);
     break;
    case 2:
     obr.setAttribute("src",obrazok2);
     break;
    case 3:
     obr.setAttribute("src",obrazok3);
     break;
    case 4:
     obr.setAttribute("src",obrazok4);
     break;
    }
 }

 else
 {
  switch (modulus)
   {
   case 1:
    obr.setAttribute("src",obrazok1);
    break;
   case 4:
    obr.setAttribute("src",obrazok2);
    break;
   case 3:
    obr.setAttribute("src",obrazok3);
    break;
   case 0:
    obr.setAttribute("src",obrazok4);
    break;
   }   
 i++;
 document.getElementById('obrazok').appendChild(obr);
 }
}, 10000);


Offline

Čestný člen
Čestný člen
JS zmena image

Registrovaný: 11.08.07
Príspevky: 4088
Témy: 34 | 34
Bydlisko: Brno
NapísalOffline : 11.03.2010 18:41 | JS zmena image

Takze, niekolko rad:
Skus si tie nazvy obrazkov vlozit do pola:
Kód:
var obrazky = ['X41.jpg', 'X42.jpg', 'X43.jpg', 'X44.jpg'];
S tym sa ti bude omnoho lahsie pracovat. Premenna modulus bude pri deleni styrmi nadobudat hodnoty 0 - 3, preto bude stacit proste
Kód:
obr.setAttribute('src', obrazky[modulus]);
Mas to tak bez switchu, omnoho jednoduchsie.
Dalej vyhod to appendChild. Ten <img> element tam uz je, nikde ho neodstranujes, takze ho ani netreba zasa pripajat.
Dalej tam mas jednu logicku chybu - podmienka modulus<5 je vzdy pravdiva, vetva else sa nikdy nevykona.
Ohladom tych anonymnych fcii - proste je to o tom, ze kus kodu vlozis do fcie, ktoru nijak nepomenujes ani ju nebudes moct potom zavolat. Hodi sa to hlavne vtedy, ked ti staci fciu volat raz, velmi dobre to vidno na priklade so setIntervalom:
Kód:
setInterval(function() {
   //kod
}, 1000);
vs
Kód:
function nejakyzbytocnynazov() {
   //kod
}
setInterval(nejakyzbytocnynazov, 1000);
Si ale na dobrej ceste, drzim palce. Zide sa ti Firefoxova Error Console (Ctrl+Shift+J), ktora ti vyhodi chyby v skripte. V inych prehliadacoch najdes cosi podobne.


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 05.03.10
Prihlásený: 17.05.13
Príspevky: 5
Témy: 2 | 2
Bydlisko: Pezinok
Napísal autor témyOffline : 11.03.2010 20:07 | JS zmena image

Ďuri, ďakujem naozaj naozaj veľmi veľmi veľmi pekne, podarilo sa to rozbehať, hlavne to pole to dosť zjednodušilo :-) Error Console je tiež veľmi dobrá nápoveda

tu je jednoduchá html stránka

Kód:
<html>
 <head>
  <title>JS</title>
  <script type="text/javascript" src="dynamic1.js" ></script>
 </head>

 <body>
  <img id='obrazok' src="X41.jpg">
 </body>
</html>


tu je finálny-triviálny javascript,

Kód:
var obrazky= ['X41.jpg', 'X42.jpg', 'X43.jpg', 'X44.jpg'];
var i=0;

intervalID = setInterval(function(){
 var modulus=i%4;
 i++;
 document.getElementById('obrazok').setAttribute('src', obrazky[modulus]);
  }, 1000);


zaujíma ma, či by sa dala táto nekonečná funkcia aj pozastaviť, napr. pomocou onmouseoveru toho obrázku a znovu spojazdniť onmouseoutom...


Offline

Čestný člen
Čestný člen
JS zmena image

Registrovaný: 11.08.07
Príspevky: 4088
Témy: 34 | 34
Bydlisko: Brno
NapísalOffline : 11.03.2010 20:14 | JS zmena image

Super, gratulujem. Toto by sa dalo niekolkymi sposobmi, ale najjednoduchsie je podla mna vytvorit nejaku globalnu premennu, pomenuj si ju napr. nadobrazkom, pricom pri mouseover by sa nastavilo nadobrazkom = true, a pri mouseout zasa na false. Do fcie (na uplny zaciatok) potom hodis podmienku, aby sa vykonavanie fcie zastavilo, ked premenna bude true:
Kód:
if (nadobrazkom) { return; }


 [ Príspevkov: 6 ] 


JS zmena image



Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy.

background-image: zmena rozmerov

v HTML, XHTML, XML, CSS

6

763

17.04.2009 13:20

Ďuri

V tomto fóre nie sú ďalšie neprečítané témy.

Zmena image textu (Adobe photoshop)

v Grafické programy

4

1227

28.04.2009 15:57

mufin

V tomto fóre nie sú ďalšie neprečítané témy.

Zmena image-background (v css) s pouzitim crossfade ...

v JavaScript, VBScript, Ajax

25

2120

26.06.2008 18:38

jsakac

V tomto fóre nie sú ďalšie neprečítané témy.

Zmena obrazka pri nadideni z myslov.../...Zmena pozadia

v JavaScript, VBScript, Ajax

2

2391

11.09.2007 22:42

rik

V tomto fóre nie sú ďalšie neprečítané témy.

Preformátovanie image

v Ostatné programy

2

556

08.11.2009 12:22

LoggedUser

V tomto fóre nie sú ďalšie neprečítané témy.

Image Preload

v JavaScript, VBScript, Ajax

5

809

30.08.2009 17:41

rooobertek

V tomto fóre nie sú ďalšie neprečítané témy.

Image edit

v Ostatné programy

2

1253

09.04.2006 13:49

Spirit

V tomto fóre nie sú ďalšie neprečítané témy.

Image HDD

v Ostatné programy

6

2692

15.10.2006 2:14

maciakba

V tomto fóre nie sú ďalšie neprečítané témy.

Image - file

v Ostatné programy

14

1302

11.06.2007 9:18

tairikuokami

V tomto fóre nie sú ďalšie neprečítané témy.

image scaling

v nVidia grafické karty

2

638

23.10.2009 6:41

Carm@gedon

V tomto fóre nie sú ďalšie neprečítané témy.

image resize

v PHP, ASP

2

561

13.10.2007 20:43

m@-nX

V tomto fóre nie sú ďalšie neprečítané témy.

Image map

v HTML, XHTML, XML, CSS

27

1134

03.01.2008 11:30

erkakbe

V tomto fóre nie sú ďalšie neprečítané témy.

Wordpress image

v Redakčné systémy

1

581

15.08.2016 22:48

89Aquarius

V tomto fóre nie sú ďalšie neprečítané témy.

image hosting

v Ostatné programy

10

695

18.05.2017 8:46

Andre

V tomto fóre nie sú ďalšie neprečítané témy.

Image upload

v PHP, ASP

10

802

08.10.2007 19:04

Flety

V tomto fóre nie sú ďalšie neprečítané témy.

Bad image

v Notebooky a netbooky

6

585

29.09.2018 10:07

michalesku



© 2005 - 2024 PCforum, edited by JanoF