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

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.

More by this Author

  • Tips For How to Stain Concrete Floors
    1

    You don't always have to tile, carpet, or hardwood your floors. The new thing is to just stain the concrete that's already there. It's a lot of work, but if done properly, your home will look gorgeous. If you're...

  • How to Get Rid of Mice In and Around The House?
    5

    Until this year, the only time that I've had mice or rats in the house were when my daughter had pet mice and rats, and one of those times we did have one loose in the house. (Science fair project got loose.) Anyway,...

  • How to Build Wooden Roof Trusses
    21

    You may refer to a truss as the rafter, but it's basically the skeleton of the roof, carrying the weight of the frame and supporting the walls of the building. Trusses are very important to preventing the walls from...


Click to Rate This Article
working