ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Computers & Software»
  • Computer Science & Programming»
  • Programming Languages

Javascript: How to create a simple slide show with clickable links

Updated on September 11, 2012

Introduction

This is a simple javascript to create a slide show of images, with an associated clickable link. You can control the speed between images, and links for the images. You could use this when showing off some popular items, and want the user to click on the product image to get more information on that product or image.

Javascript Code Sample:

Place the follow javascript code between the <head></head> tags of your web page.

<script type="text/javascript">
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
</script>

HTML Code Sample:

Place the following code between the <body></body> tag of your web page.

<a href="javascript:gotoshow()"><img src="images/defaultimage.jpg" name="slide" border=0 ></a>
<script>
<!--

//set up the paths to the images, and associated links

slideshowimages("images/image1.jpg","images/image2.jpg","images/image3gif")
slideshowlinks("http://www.site1.com","http://www.site2.com","http://www.site3.com")

//speed for between images, in miliseconds
var slideshowspeed=2600

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>

Summary

Another little javascript to add a little dynamics to your web page. You could change this script up with Coldfusion, to dynamically populate the list of images and links from a database.

Check out the two books from amazon.

Click to Rate This Article