Full version: jsB@nk » Image » Slideshow » PushButton SlideShow
URL: https://www.javascriptbank.com/pushbutton-slideshow.html
This JavaScript slideshow lets the user manually move back and forth between images, by clicking on the provided buttons. An accompanying textual message of your choice is displayed below each image.
Full version: jsB@nk » Image » Slideshow » PushButton SlideShow
URL: https://www.javascriptbank.com/pushbutton-slideshow.html
<style>.Caption {font-family: Arial;font-weight: normal;font-size: 12pt;color: #FF3300; }A.Controls:link { color:#666666; text-decoration:none; font-family: Arial; font-size: 14pt; font-weight: bold; }A.Controls:visited { color:#666666; text-decoration:none; font-family: Arial; font-size: 14pt; font-weight: bold; }A.Controls:active { color:#666666; text-decoration:none; font-family: Arial; font-size: 14pt; font-weight: bold; }A.Controls:hover { color:#00FF00; text-decoration:none; font-family: Arial; font-size: 14pt; font-weight: bold; }</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script>// ==============================// Set the following variables...// ==============================// Set the slideshow speed (in milliseconds)var SlideShowSpeed = 3000;// Set the duration of crossfade (in seconds)var CrossFadeDuration = 2;var Picture = new Array(); // don't change thisvar Caption = new Array(); // don't change thisvar showHot = false; // don't change this// Specify the image files...// To add more images, just continue// the pattern, adding to the array below.// To use fewer images, remove lines// starting at the end of the Picture array.// Caution: The number of Pictures *must*// equal the number of Captions!Picture[1] = 'photo1.jpg';Picture[2] = 'photo2.jpg';Picture[3] = 'photo3.jpg';Picture[4] = 'photo4.jpg';// Specify the Captions...// To add more captions, just continue// the pattern, adding to the array below.// To use fewer captions, remove lines// starting at the end of the Caption array.// Caution: The number of Captions *must*// equal the number of Pictures!Caption[1] = "This is the first caption.";Caption[2] = "This is the second caption.";Caption[3] = "This is the third caption.";Caption[4] = "This is the fourth caption.";// =====================================// Do not edit anything below this line!// =====================================var tss;var iss;var jss = 0;var pss = Picture.length-1;var preLoad = new Array();for (iss = 1; iss < pss+1; iss++){preLoad[iss] = new Image();preLoad[iss].src = Picture[iss];}function control(how){if (showHot){if (how=="H") jss = 1;if (how=="F") jss = jss + 1;if (how=="B") jss = jss - 1;if (jss > (pss)) jss=1;if (jss < 1) jss = pss;if (document.all){document.images.PictureBox.style.filter="blendTrans(duration=2)";document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";document.images.PictureBox.filters.blendTrans.Apply();}document.images.PictureBox.src = preLoad[jss].src;if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];if (document.all) document.images.PictureBox.filters.blendTrans.Play();}}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload='showHot=true;self.focus();'><table border=0 cellpadding=10 cellspacing=0> <tr> <!-- The next table cell holds the images. Set cell and image width and height the same. The img src must have name=PictureBox in its tag. Often, the first image in the Picture array in the script is used here; but you may also use a different, introductory image as we have here, since this image is shown only on start-up. //--> <td width=160 height=240 colspan="3"> <img src=logojs.gif name=PictureBox width=160 height=240> </td> </tr> <tr> <!-- The next table cell holds the captions. This table cell must have id=CaptionBox and class=Caption in its tag. The default caption shows whilst loading in all browsers; NS4 will show only the default caption, throughout. //--> <td id=CaptionBox class=Caption align=center colspan="3"> This is the default caption. </td> </tr> <!-- The following three cells contain the controls. Each of the control a href's must contain class= Controls, to attach the styles (see top of script). To dress this up a bit, you can of course substitute <img src> images for the text in the links. //--> <tr> <td align="center"> <a class=Controls href="#" onClick="javascript:control('B');">< <</a> </td> <td align="center"> <a class=Controls href="#" onClick="javascript:control('H');">| | |</a> </td> <td align="center"> <a class=Controls href="#" onClick="javascript:control('F');"><b>> ></b></a> </td> </tr> </table></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->