JavaScript Photo Slider Code

A simple "photo slider" script that allows your surfers to manually cycle through and browse an unlimited number of images. Comes with a forward and back button.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

Insert this code into <body> tags

<table border="0" cellpadding="0">
  <caption><strong>Photos</strong></caption>
  <tr>
    <td width="100%"><img src="photo1.gif" width="300" height="240" name="photoslider"></td>
  </tr>
  <tr>
    <td width="100%"><form method="POST" name="rotater">
      <div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0

/*Change the below variables to reference your own photos. You may have as many photos in the slider as you wish*/
photos[0]="photo1.gif"
photos[1]="photo2.gif"
photos[2]="photo3.gif"
photos[3]="photo4.gif"
photos[4]="photo5.gif"


function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script><input type="button" value="&lt;&lt;Back" name="B2"
      onClick="backward()"> <input type="button" value="Next&gt;&gt;" name="B1"
      onClick="forward()"><br>
      <a href="#" onClick="which=1;backward();return false"><small>Start Over</small></a></p>
      </center></div>
    </form>
    </td>
  </tr>
</table>

Instruction:

Change the following text:

photos[0]="photo1.gif" - image URL channels (http://www.website.com/image1.gif).
src="photo1.gif" - First picture URL channels.

Webmaster » Web Programming » JavaScript » Image Effects » Photo Slider Code

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links