Een eenvoudige Javascript diashow

In dit korte artikel zullen we zien hoe een eenvoudige diavoorstelling met een paar lijnen van JavaScript.

Voor de weinigen die weet het niet, een slideshow is alleen maar een speciaal soort galerie waar verschillende beelden worden achter elkaar getoond na een vooraf bepaalde volgorde.

In ons voorbeeld, voor educatieve doeleinden piutosto zullen worden vereenvoudigd, tonen we een afbeelding in een tijd met een simpele knop 'Doorgaan' om de volgende afbeelding te bekijken. Hieronder is een screenshot:

Om te zien een demo van het script klik hier .

Laten we de code hieronder te zien:

 <script type="text/javascript"> <! -

 





 / / Maak een array met de verschillende beelden te laten zien.







 / / In ons voorbeeld, de beelden zijn in een hypothetisch map "img"







 slideshows = array ();

 





 slideshows [0] = "/ img / milano.jpg";

 





 diashow [1] = "/ img / roma.jpg";

 





 diashow [2] = "/ img / firenze.jpg";







 diashow [3] = "/ img / venezia.jpg";









 / / Definieer een variabele die ik gebruik als teller







 var i = 0;









 / / Roep de functie die de opeenvolging van beelden verwerkt







 functie browse ()







 {



  



 / / Gebruik de ternaire operator voor verificatie



  



 / / En bijwerken van de tellerstand



  



 i = ((i <(slideshow.length-1)) i +1:? 0);





  



 / / Dynamisch Verander de "src" attribuut van de getoonde afbeelding



  



 document.slideshowImg.src diashow = [i];

 





 }







 document.write ('<img src="' slideshow[0] + +'" name="slideshowImg"> <br/>');







 document.write ('<input type="button" value="Continua" onClick="sfoglia()">');







 //--></ Script>

 

Het hart van onze code (heel simpel) is in 'ternaire operator:

 



 i = (i <(slideshow.length-1))?

 



 i +1: 0;

 

die voert een serie tests:

• als de contante waarde van de teller "i" is minder dan het totaal aantal afbeeldingen van een stijging (in wezen naar de volgende stap)
• anders (count groter dan of gelijk aan het aantal afbeeldingen in de array) zet de waarde op nul (begin opnieuw met de eerste afbeelding)

Het resultaat van dit artikel is met succes getest met IExplorer, Firefox en Safari.