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>- Javascript: Pop-up window from a HTML link
- Javascript: Pop up Message Box On Submit
- Javascript: How to disable Right Click option
- Javascript: Controlling the number of characters entered into a HTML form field.
- Javascript: How to refresh parent window from a pop-up after closing pop-up
- Javascript: Rotate a different image when the page is reloaded
- Javascript: Drop Down Menu List
- Javascript: A simple calendar with today's date highlighted.
- Javascript: How to hide and show other form fields with a select box with Javascript and HTML
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.
Comments
No comments yet.