Phiên bản đầy đủ: jsB@nk » Hình ảnh » Trình diễn ảnh » Trình diễn ảnh với các nút nhấn
URL: https://www.javascriptbank.com/pushbutton-slideshow.html
Ảnh sẽ được thay đổi khi ta nhấn nút.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Trình diễn ảnh » Trình diễn ảnh với các nút nhấn
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-->