meerdere scripts op 1 pagina werken niet.

Status
Niet open voor verdere reacties.
P

patdevriend

Gebruiker
Lid geworden
20 feb 2011
Berichten
5
Wil een viertal foto`s op verschillende plaatsen in webpagina met Java script een presentatie laten geven. Heb alle foto`s goed genummerd etc. Wat gebeurd er; Bij invoegen 1 script werkt het perfekt. Bij invoegen meerder scripts stopt de presentatie en zie je wel de eerste foto. Hoe krijg ik dit werkende????
Bedankt, Patrick.

Dit is het script;
<script type="text/javascript">
// hier geef je (het pad naar) de naam van jouw foto's in
var foto=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg");
var pauze=2000;// tijd tussen het wisselen van beeld in milliseconden
var i=0;
function start() {
if (i<foto.length) {document.afb.src=foto;i++;setTimeout("start()",pauze);}
else {i=0;start()}}document.write("<img name='afb' src='"+foto[0]+"'>");
window.onload=start;</script>
 
Ugh, wat een vreselijk script.

[...] invoegen meerder scripts stopt de presentatie [...]
Klik om te vergroten...

Dat komt omdat alle global variables steeds worden overschreven. Hier, probeer dit:[JS]FotoBannerRotation = function(fotos, time, output)
{
this.fotos = fotos;
this.output = document.getElementById(output);
this.index = 0;

this.timeout = setInterval(function(x)
{
return function()
{
x.output.src = x.fotos[++x.index % x.fotos.length];
}
}(this), time);
};[/JS]en dan de bijbehorende HTML/js code:
HTML: 
<img id='test1' />
<img id='test2' />

<!-- voor elk foto/banner geval is 1 <img> element nodig met een ID -->





<script>

   new FotoBannerRotation(['foto1.jpg', 'foto2.jpg', 'foto3.jpg'], 500, 'test1');
   new FotoBannerRotation(['foto4.png', 'fotoiets.bmp'], 1000, 'test2');

   // voor elk foto/banner geval is 1 regel nodig. Parameters:
   //  [] array met foto's
   //  #ms tussen elke foto (1e is halve seconde, 2e is 1 seconde)
   //  ID van de foto als in <img id='??' />

</script>


:thumb:
 
Plaats het 1e script in een bestand, zeg, fotobannerrotatie.js

Nu, dit wordt de opmaak van je pagina:
HTML: 
<!-- html, head, etcetera. -->


<body><!-- deze staat er al ergens als het goed is -->



   <!-- ergens dan op de pagina dit: -->
   <img id='fotobanner1' />



   <!-- NET voor de </body> dit: -->
   <script src='fotobannerrotatie.js'></script>
   <script>
      new FotoBannerRotation(['foto1.jpg', 'foto2.jpg', 'foto3.jpg'], 2500, 'fotobanner1');
   </script>

</body>
:thumb:
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan