Avatar billede krk Nybegynder
20. januar 2010 - 08:56 Der er 4 kommentarer og
1 løsning

Vise et nyt billede efter 10 sec

Hej

Jeg har et array der indeholder et billede med tilhørende tekst.

Jeg vil gerne at billede+tekst skifter automatisk efter 10 sec. Altså ikke når man re-loader siden, men automatisk.

Hvordan gør jeg det?
Avatar billede majbom Novice
20. januar 2010 - 09:04 #1
du kan bruge timeout funktionen, den sætter du til at køre en funktion der skifter billedet ud fra arrayet og så kan du bestemme intervallet.
Avatar billede krk Nybegynder
20. januar 2010 - 09:39 #2
Ked af det, men jeg er total nybegynder.
Jeg kan godt se hvordan timeout funktionen virker, men jeg kan  ikke finde ud af hvordan jeg skal bruge den samme med et array.

Hvis nu vi siger mit array ser sådan ud:
<script type="text/javascript">
   
    var arrMedias = new Array();   
    arrMedias[0] = new Array('Tove','Hansen','Kurvevej 3','8523','Skørping');
    arrMedias[1] = new Array('Jens','Hansen','Kurvevej 3','8523','Skørping');
    arrMedias[2] = new Array('Poul','Jensen','Stranden 4','8456','Løkken');
    arrMedias[3] = new Array('Ulla','Nielsen','Kærgade','15','Århus');   

    var i =0
    // for-løkken kan skrives på enten denne måde eller...
    for (i=0;i<arrMedias.length;i++)
    {           
        document.write(arrMedias[i][0] + " ");
        document.write(arrMedias[i][1] + " ");
        document.write(arrMedias[i][2] + " ");
        document.write(arrMedias[i][3] + " ");
        document.write(arrMedias[i][4] + " ");
        document.write("<p></p>" );       
    }
</script>

Så skrives det jo bare ud i en lang liste, men jeg vil gerne have at der kun skrives en linie ud af gangen (med 10 sec. interval)

Kan du guide mig lidt på vej?
Avatar billede danielbahl Nybegynder
20. januar 2010 - 09:55 #3
Hej Krk,

Det du gør er at du laver et array med nogle billeder i, og så laver du en timeout som splazz også nævner, eksempel:

<script type="text/javascript"> 
      var aImages  =  [ "h108.gif", 
                        "106.gif", 
                        "102.gif", 
                        "101.gif", 
                        "103.gif"]; 
      var oImage  =  null; 
      var iIdx    =  0; 
      function play(){ 
        try{ 
          //kig kun en gang i  DOM og cache det 
          if(oImage===null){ 
            oImage  =  window.document.getElementById("imgHolder"); 
          } 
          oImage.src  =  aImages[(++iIdx)%(aImages.length)]; 
          setTimeout('play()',5000); 
        }catch(oEx){ 
          //lidtFejlsøgning
        } 
      }     
    </script> 


Scriptet her bruger et <img id="[[id]]">-tag til at vise billeder, så udover at have dette lille script i en <head> på din side, skal du også sætte dette img-tag ind, der hvor billederne skal vises:

<img id="imgHolder" />

Ydermere skal dit body-tag rettes til: 

<body onload="play()"> 


--
Håber dette hjalp dig lidt på vej

Med venlige hilsner
Daniel Bahl
http://PCPRO.dk
Avatar billede krk Nybegynder
20. januar 2010 - 10:46 #4
Det hjælper lidt, men mit problem er mit array.
Jeg har jo ikke kun et billede i mit array. Jeg har billede + en tekst der skal skifte sammen med billede.
Jeg ved at i mit eksempel array er der kun vist tekst, men i stedet for adressen kunne der bare være et filnavn på et billede.

Hovrdan skifter jeg mellem:
arrMedias[0] = new Array('Tove','Hansen','Kurvevej 3','8523','Skørping');
og
arrMedias[1] = new Array('Jens','Hansen','Kurvevej 3','8523','Skørping');

Håber du forstår hvad jeg mener
Avatar billede krk Nybegynder
20. januar 2010 - 20:50 #5
Hej
Jeg har fået det løst på følgende måde:
<html>
    <head>
        <script type="text/javascript">   
            var arrMedias = new Array();   
            arrMedias[0] = new Array('Tove','Hansen','Kurvevej 3','blue.gif','Skørping');
            arrMedias[1] = new Array('Jens','Hansen','Kurvevej 3','red.gif','Skørping');
            arrMedias[2] = new Array('Poul','Jensen','Stranden 4','yellow.gif','Løkken');
            arrMedias[3] = new Array('Ulla','Nielsen','Kærgade','pink.gif','Århus');   
           
            var i = 0   
            var p = arrMedias.length -1;
           
            function changeText3(){
           
                var newHTML = "hej " + arrMedias[i][0] + " " + arrMedias[i][1] + " " + arrMedias[i][2] + "<img src=' " + arrMedias[i][3] + "' /> " + arrMedias[i][4] + " ";
                document.getElementById('para').innerHTML = newHTML;
               
                if(i==p){
                    i = 0
                }
                else
                {
                    i=++i
                }
               
                setTimeout ( "changeText3()", 2000 );
            }   
        </script>
    </head>
    <body onload="changeText3()">
        <h2>Array der løber en linie igennem af gangen ved hjælpe af "setTimeout funktionen"</h2>
        <p id='para'>Welcome to the site dude</b> </p>
    </body>
</html>

Kom endelig med kommentarer for det virker, men jeg er ikke sikker på det er den bedste løsning :-)

I må gerne begge hente point for at lede mig i den rigtige retning
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester