TexasWebDevelopers--A Dallas Texas Web Design and Development Company.

• Portfolio • FAQ's • Pricing • Request Info • Code Examples • Demos • Marketing • Tutorials • Downloads •

javascript slide show

Here is the code. Place it where you want the images to appear:

<script type="text/javascript">
var sequentialslides=new Array()
  //Set Path to Image plus optional URL ("" for no URL):
  sequentialslides[0]=["http://www.texaswebdevelopers.com/images/ad1.gif", "http://www.texaswebdevelopers.com"]
  sequentialslides[1]=["http://www.texaswebdevelopers.com/images/ad2.gif", "http://www.texaswebdevelopers.com/examples"]
  sequentialslides[2]=["http://www.texaswebdevelopers.com/images/ad3.gif", "http://www.texaswebdevelopers.com"]
  sequentialslides[3]=["http://www.texaswebdevelopers.com/images/ad4.gif", "http://www.texaswebdevelopers.com/examples"]<br>
  sequentialslides[4]=["http://www.texaswebdevelopers.com/images/ad5.gif", "http://www.texaswebdevelopers.com"]
  sequentialslides[5]=["http://www.texaswebdevelopers.com/images/ad6.gif", "http://www.texaswebdevelopers.com/examples"]<br>
  sequentialslides[6]=["http://www.texaswebdevelopers.com/images/ad7.gif", "http://www.texaswebdevelopers.com"]
  sequentialslides[7]=["http://www.texaswebdevelopers.com/images/ad8.gif", "http://www.texaswebdevelopers.com/examples"]<br>
  sequentialslides[8]=["http://www.texaswebdevelopers.com/images/ad9.gif", "http://www.texaswebdevelopers.com"]
  sequentialslides[9]=["http://www.texaswebdevelopers.com/images/ad10.gif", "http://www.texaswebdevelopers.com/examples"]

//Set pause between each image display (1000=1 second):
  var slidedelay=1000
//Set how many images to show at once (must be less than total # of images above):
  var slidestoshow=3
//Specify code to insert between each slide (ie: "<br>" to insert a line break and create a vertical layout)
  //"" for none (or horizontal):
  var slideverthoriz=""
//Set optional link target to be added to all images with a link:
  var optlinktarget="_blank"
//Set image border width:
  var imageborderwidth=0
//Set opacity value of each image when it's "dimmed", and when it's not, respectively (1=100% opaque/normal).
  //Change 0.2 to 0 to completely hide image when it's dimmed:
  var opacityvalues=[0.1,1]

function goforit(theimg){
  var imagelocation=""
  if (theimg[1]!="")
  imagelocation='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
  imagelocation+='<img src="'+theimg[0]+'" border="'+imageborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">'
  if (theimg[1]!="")
  imagelocation+='</a>'
  return imagelocation
  }
var currentslide=1 //var to track current slide (total: slidestoshow)
  var currentimagedude=0 //var to track current image (total: seqslides.length)
  var isfirstcycle=1 //boolean to indicate whether this is the first cycle
if (document.getElementById){
  for (i=0;i<slidestoshow;i++)
  document.write('<span id="sequentialslides'+i+'" class="slidestyle">'+goforit(sequentialslides[i])+'</span>'+slideverthoriz)
  currentimagedude=slidestoshow
  glowworm(0,opacityvalues[1])
  }
function glowworm(slideindex, amt){
  var slideobj=document.getElementById("sequentialslides"+slideindex).getElementsByTagName("IMG")[0]
  if (slideobj.filters)
  slideobj.filters.alpha.opacity=amt*100
  else if (slideobj.style.MozOpacity)
  slideobj.style.MozOpacity=amt
  }
function showboat(){
  if (currentslide<slidestoshow){
  if (!isfirstcycle)
  changeimage(currentslide)
  glowworm(currentslide, opacityvalues[1])
  currentslide++
  }
  else{
  isfirstcycle=0
  for (i=0;i<slidestoshow;i++)
  glowworm(i, opacityvalues[0])
  changeimage(0)
  glowworm(0, opacityvalues[1])
  currentslide=1
  }
  }
function changeimage(slideindex){
  document.getElementById("sequentialslides"+slideindex).innerHTML=goforit(sequentialslides[currentimagedude])
  currentimagedude++
  if (currentimagedude>=sequentialslides.length)
  currentimagedude=0
  }
if (document.getElementById)
  setInterval("showboat()",slidedelay)
</script>

Place this style in between the <head> and </head> tags: