login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:

Scripts > JS > Afbeelding effecten > Slideshow met timer en onderschrift

Slideshow met timer en onderschrift

Auteur: zamna - 05 augustus 2006 - 13:37 - Gekeurd door: Gerard - Hits: 4876 - Aantal punten: 2.50 (1 stem)




Ik heb ooit eens voor mezelf een slideshow geschreven in javascript en vond het wel nuttig die eens op SiMa te zetten. De show is crossbrowser en is eenvoudig aan te passen. Verder kan je een tussentijd en onderschriften instellen. In IE is er een overgangseffect, in FF niet. Hieronder staat de javascriptcode maar de broncode van het voorbeeld bekijken kan makkelijker zijn. Opmerkingen zijn welkom.

Code:
  1. <script type="text/javascript">
  2. <!--
  3. /*
  4. =====================================================
  5. Copyrighted by Zamna
  6. Deze slideshow mag vrij gebruikt worden indien deze
  7. commentaarregel blijft staan.
  8. =====================================================
  9. */
  10.  
  11. // plaats hier welke figuren in de diashow moeten voorkoemen
  12. var pics = new Array("pic1.jpg","pic2.jpg","pic3.jpg");
  13.  
  14. // plaats hier in causale volgorde welk onderschirft de dia's moeten krijgen
  15. var uitleg = new Array("pic1","pic2","pic3");
  16.  
  17. // plaats hier hoeveel dia's de show bevat
  18. var aantalpics = 3
  19.  
  20. //verander hier de tijd tussen 2 dia's *** 1000 = 1 seconde *** gerbuik aleen duizendtallen
  21. var tussentijd = 4000
  22.  
  23. /*
  24. =====================================================
  25. ********* niets meer veranderen hieronder **********
  26. =====================================================
  27. */
  28. var timer = 0;
  29. var timeraan = false;
  30. var pic = -1;
  31.  
  32. function stop_show()
  33. {
  34. document.getElementById("slideVorige").disabled=false
  35. document.getElementById("slideVolgende").disabled=false
  36. document.getElementById("slideStart").disabled=false
  37. document.getElementById("slideStop").disabled=true
  38.  
  39. timeraan = false;
  40. }
  41.  
  42. function vorige_show()
  43. {
  44. verander_pic(-1)
  45. }
  46.  
  47. function volgende_show()
  48. {
  49. verander_pic(1)
  50. }
  51.  
  52. function start_show()
  53. {
  54. document.getElementById("slideVorige").disabled=true
  55. document.getElementById("slideVolgende").disabled=true
  56. document.getElementById("slideStart").disabled=true
  57. document.getElementById("slideStop").disabled=false
  58.  
  59. timeraan = true;
  60. verander_pic(1)
  61. }
  62.  
  63. function verander_pic(step)
  64. {
  65. pic +=step;
  66.  
  67. if (pic > aantalpics - 1){
  68. pic = 0;
  69. }
  70.  
  71. if (pic < 0){
  72. pic = aantalpics - 1;
  73. }
  74.  
  75. /*
  76. andere effecten
  77. if (document.all){
  78. document.images.slidepic.style.filter="revealtrans(duration=3,8)";
  79. document.images.slidepic.filters.revealtrans.Apply();
  80. }
  81. document.images.slidepic.src = pics[pic];
  82. if (document.all){
  83. document.images.slidepic.filters.revealtrans.Play();
  84. }
  85. */
  86.  
  87. // controle IE of FF !
  88. if (document.all){
  89. document.images.slidepic.style.filter="blendTrans(duration=3)";
  90. document.images.slidepic.filters.blendTrans.Apply();
  91. }
  92.  
  93. document.images.slidepic.src = pics[pic];
  94.  
  95. if (document.all){
  96. document.images.slidepic.filters.blendTrans.Play();
  97. }
  98.  
  99. document.getElementById("onderschrift").value= uitleg[pic]
  100.  
  101. timer = tussentijd;
  102. teller();
  103. }
  104.  
  105. function teller()
  106. {
  107. if (timeraan == true) {
  108. if(timer == 0)
  109. {
  110. verander_pic(1);
  111. }
  112. else
  113. {
  114. timer = timer - 1000;
  115. setTimeout("teller()", 1000);
  116. }
  117. }
  118. }
  119.  
  120. //-->
  121.  
  122. /*
  123. ===============================================================
  124. nu komt de html, hier aan mag je alles veranderen,
  125. hier kan je ook de layout en kleuren van de slideshow aanpassen
  126. ===============================================================
  127. */
  128. </script>
Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (6)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.022s