Photo Slide Show With User Controls

[Total: 0    Average: 0/5]

This script allows the user to flip through many photos by loading the photos into the cache to make moving forwards and backwards faster.

Body Code:

  <table width="99%" border="0">
      <tr>
        <td>&nbsp;</td>
        <td>
          <div align="center"><IMG SRC="http://www.js-examples.com/js/pic1.gif" NAME=animation></div>
        </td>
        <td>&nbsp;</td>
      </tr>
    </table>

    <SCRIPT LANGUAGE="JavaScript">

      images = new Array();

	  // only 2 images exist in this directory
      for(var i=0; i < 2; i++) {
        images[i] = new Image();
        images[i].src = "http://www.js-examples.com/js/pic" + (1+i) + ".gif";
      }
 
      function animate()
      {
	  // this sends the user away if they go past the end
      if(frame >= images.length-1) {
          window.alert('Thank you for viewing the pictures');
          location.href = "http://www.js-examples.com/";
        }
        else
          document.animation.src = images[++frame].src;
      }

      function animateBack()
      {
          if(frame == 0) {
		    // this sends the user away if they go negative
            window.alert('Thank you for viewing the pictures');
            location.href = "http://www.js-examples.com/";
          }
          else
            document.animation.src = images[--frame].src;
      }

      var frame = 0;
    </SCRIPT>

    <FORM>
      <table width="99%" border="0" align="left">
        <tr>
          <td>
            <div align="right"><INPUT TYPE=button VALUE="Back" onClick="animateBack()"></div>
          </td>
          <td>
            <div align="left"><INPUT TYPE=button VALUE="Next" onClick="animate()"></div>
          </td>
        </tr>
      </table>
    </FORM>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *