advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

aurele on 08/24/06


Tagged

slideshow


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

mzim
verucadea
vali29
maniesco


Slideshow

Published in: JavaScript 

URL: http://www.codelifter.com/main/javascript/slideshow3.html

Slideshow de imagenes sin fade y una linea de titulo abajo

Plain TextExpand 
  1. <!--
  2.  
  3. SlideShow with Captions and Cross-Fade
  4. (C)2002 by CodeLifter.com
  5.  
  6. Shows images and accompanying captions.
  7. Browsers: NS4-7,IE4-6
  8. Fade effect only in IE; degrades gracefully.
  9. NS4 shows default caption only.
  10.  
  11. INSTRUCTIONS:
  12.  
  13. Copy this entire script into a completely blank
  14. page.  Follow the commented instructions within.
  15.  
  16. //-->
  17.  
  18. <html>
  19.  
  20. <head>
  21.  
  22. <!-- 
  23. Set up the caption font in the following style.
  24. Place the style script in the head of the page.
  25. //-->
  26.  
  27. <style>
  28. .Caption {
  29. font-family: Arial;
  30. font-weight: bold;
  31. color:      #123456;
  32. }
  33. </style>
  34.  
  35. <!-- 
  36. Place the following script in the head of the page.
  37. Follow the set-up instructions within the script.
  38. //-->
  39.  
  40. <script>
  41.  
  42. // (C) 2002 www.CodeLifter.com
  43. // http://www.codelifter.com
  44. // Free for all users, but leave in this header.
  45.  
  46. // ==============================
  47. // Set the following variables...
  48. // ==============================
  49.  
  50. // Set the slideshow speed (in milliseconds)
  51. var SlideShowSpeed = 3000;
  52.  
  53. // Set the duration of crossfade (in seconds)
  54. var CrossFadeDuration = 3;
  55.  
  56. var Picture = new Array(); // don't change this
  57. var Caption = new Array(); // don't change this
  58.  
  59. // Specify the image files...
  60. // To add more images, just continue
  61. // the pattern, adding to the array below.
  62. // To use fewer images, remove lines
  63. // starting at the end of the Picture array.
  64. // Caution: The number of Pictures *must*
  65. // equal the number of Captions!
  66.  
  67. Picture[1]  = 'Image001.jpg';
  68. Picture[2]  = 'Image002.jpg';
  69. Picture[3]  = 'Image003.jpg';
  70. Picture[4]  = 'Image004.jpg';
  71. Picture[5]  = 'Image005.jpg';
  72. Picture[6]  = 'Image006.jpg';
  73. Picture[7]  = 'Image007.jpg';
  74. Picture[8]  = 'Image008.jpg';
  75. Picture[9]  = 'Image009.jpg';
  76. Picture[10] = 'Image010.jpg';
  77.  
  78. // Specify the Captions...
  79. // To add more captions, just continue
  80. // the pattern, adding to the array below.
  81. // To use fewer captions, remove lines
  82. // starting at the end of the Caption array.
  83. // Caution: The number of Captions *must*
  84. // equal the number of Pictures!
  85.  
  86. Caption[1]  = "This is the first caption.";
  87. Caption[2]  = "This is the second caption.";
  88. Caption[3]  = "This is the third caption.";
  89. Caption[4]  = "This is the fourth caption.";
  90. Caption[5]  = "This is the fifth caption.";
  91. Caption[6]  = "This is the sixth caption.";
  92. Caption[7]  = "This is the seventh caption.";
  93. Caption[8]  = "This is the eighth caption.";
  94. Caption[9]  = "This is the ninth caption.";
  95. Caption[10] = "This is the tenth caption.";
  96.  
  97. // =====================================
  98. // Do not edit anything below this line!
  99. // =====================================
  100.  
  101. var tss;
  102. var iss;
  103. var jss = 1;
  104. var pss = Picture.length-1;
  105.  
  106. var preLoad = new Array();
  107. for (iss = 1; iss < pss+1; iss++){
  108. preLoad[iss] = new Image();
  109. preLoad[iss].src = Picture[iss];}
  110.  
  111. function runSlideShow(){
  112. if (document.all){
  113. document.images.PictureBox.style.filter="blendTrans(duration=2)";
  114. document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
  115. document.images.PictureBox.filters.blendTrans.Apply();}
  116. document.images.PictureBox.src = preLoad[jss].src;
  117. if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
  118. if (document.all) document.images.PictureBox.filters.blendTrans.Play();
  119. jss = jss + 1;
  120. if (jss > (pss)) jss=1;
  121. tss = setTimeout('runSlideShow()', SlideShowSpeed);
  122. }
  123.  
  124. </script>
  125.  
  126. </head>
  127.  
  128. <!--
  129. Add the onload=runSlideShow() event call to the body tag.
  130. //-->
  131.  
  132. <body onload=runSlideShow() bgcolor=#000000>
  133.  
  134. <!--
  135. The following table holds the images and captions.
  136. Place the table in your page where you want the slideshow
  137. to appear.  Follow the instructions for each table cell.
  138. //-->
  139.  
  140. <table border=0 cellpadding=0 cellspacing=0>
  141.   <tr>
  142.     <!--
  143.     The next table cell holds the images.
  144.     Set cell and image width and height the same.
  145.     The img src must have name=PictureBox in its
  146.     tag.  Usually the first image in the Picture
  147.     array in the script is used here.
  148.     //-->
  149.     <td width=350 height=280>
  150.     <img src=Image001.jpg name=PictureBox width=350 height=280>
  151.     </td>
  152.   </tr>
  153.   <tr>
  154.     <!-- 
  155.     The next table cell holds the captions.
  156.     This table cell must have id=CaptionBox and
  157.     class=Caption in its tag. The default caption
  158.     shows whilst loading in all browsers; NS4
  159.     will show only the default caption, throughout.
  160.     //-->
  161.     <td id=CaptionBox class=Caption align=center bgcolor=#fedcba>
  162.     This is the default caption.
  163.     </td>
  164.   </tr>
  165. </table>
  166.  
  167. </body>
  168.  
  169. </html>

Report this snippet 

You need to login to post a comment.