Simple Javascript Slideshow
Posted by admin | Posted in JavaScripts | Posted on 18-03-2009
0
Here i will explain how to create a simple slideshow using javascript.
Our main function displaynext(shift) will receive the value of shift based on the navigational buttons clicked ( it will either +1 or -1 ) and it will receive the value of 0 at the time of page load. Inside the function first the value of present slide is changed after adding the value of shift with present slide value. Then by one if condition the value of slide is checked as it should be within the values of image array. The value should be between 0 and number of element in the array. Once the if condition is satisfied, by using the .src property of the image element of the document the image is displayed. In the next line we will download the next image to be shown at background to cache. This way the next image can be shown immediately without any time delay. Here is the code of displaynext function.
function displaynext(shift){
present_slide=present_slide + shift;
if(images.length > present_slide && present_slide >= 0){
document.images[''im''].src = images[present_slide];
var next_slide=present_slide + 1;
download(next_slide); // Download the next image
}
At the time of page load we will pass a value of 0 to displaynext function to display the first element of the image array. While displaying this first element since the present slide value will be 0 so the previous button will not be visible. Here is the complete code of the slide show page.
- <html>
- <head>
- <title>(Type a title for your page here)</title>
- <script language=”JavaScript”>
- var present_slide=0;
- var images = new Array(”http://www.anyserver/image//2435.jpg”,
- ”http://www.anyserver/image//2436.jpg”,
- ”http://www.anyserver/image//2437.jpg”,
- ”http://www.anyserver/image//2438.jpg”,
- ”http://www.anyserver/image//2439.jpg”,
- ”http://www.anyserver/image//2440.jpg”,
- ”http://www.anyserver/image//2441.jpg”,
- ”http://www.anyserver/image//2442.jpg”);
- objImage = new Image();
- function download(img_src){
- // preload the image file
- objImage.src=images[img_src];
- }
- function displaynext(shift){
- present_slide=present_slide + shift;
- if(images.length > present_slide && present_slide >= 0){
- document.images[''im''].src = images[present_slide];
- var next_slide=present_slide + 1;
- download(next_slide); // Download the next image
- }
- if(present_slide+1 >= images.length ){
- document.f1.Next.style.visibility = “hidden”;
- present_slide=images.length-1;
- }else{document.f1.Next.style.visibility = “visible”;}
- if(present_slide<=0 ){
- document.f1.Prev.style.visibility = “hidden”;
- present_slide=0;
- }else{
- document.f1.Prev.style.visibility = “visible”;}
- }
- </script>
- </head>
- <body onLoad=”displaynext(0)”>
- <form name=”f1″ method=post action=””>
- <img name=”im” ></a><br>
- <input type=”button” name=”Prev” value=” << ” onClick=”displaynext(-1);”>
- <input type=”button” name=”Next” value=” >> ” onClick=”displaynext(1);”>
- </form>
- </body>
- </html>
Related posts:
- Caching of images using javascript image object
- Slideshow using jquery
- Simple Calendar Script Using Javascript
- Windows XP shortcuts for interner explorer, excel and powepoint
- Adding a draggable div along with the cursor using simple javascript
- XML Parsing Made Easy
- Adding and removing child nodes using javascript and DOM
