»
Tiếng AnhTiếng PhápTiếng Việt

In - Trình diễn ảnh với các nút nhấn - JavaScriptBank.com

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: http://www.javascriptbank.com/pushbutton-slideshow.html

Trình diễn ảnh với các nút nhấn © JavaScriptBank.comẢ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: http://www.javascriptbank.com/pushbutton-slideshow.html



CSS
<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-->


JavaScript
<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-->


HTML
<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');">&lt; &lt;</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>&gt; &gt;</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-->