JavaScript Slideshow script using image objectIn our script we will first create an array with urls of the images as array element. We will create an image object and inside the function download we will use this image object to download image at background to cache. This download function will be called once we successfully display an image from the array. Before that let us try to understand the buttons we will be using in our slide show. We will be using two buttons to navigate in our slideshow. One button will move one step forward and other button will move one step backward. So each button will carry one value either +1 or -1 to tell what should be the next picture. The function name displaynext() receives these values and display the corresponding image. You can understand that at the last slide ( or image ) the NEXT button should be disabled as there is no next image . Same way at first slide the PREVIOUS button should be disabled. To work in all the browsers we will make it visible or hidden rather than making it enable or disable. Here is the code which will make NEXT button hidden at the last slide.
Same way at the first slide we will make previous button hidden.
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.
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.
Subscribe to our YouTube Channel here
This article is written by plus2net.com team.
|
More on JavaScript Image Object Image SlideShow Script using navigational buttons Image Loading to cache while page load by Image object Reloading the image without refreshing the page Image Rotator Script for automatic Slideshow Image Move across by button click Image Move continuously across screen Image offSetLeft and offSetTop to get position of the image from left and top Image Position : Positioning an image by assigning value to style.top and style.left Image width: Managing width of the image Image height: managing height of the image Image align: Image align left or right Image border: adding and removing border from Image Image alt: updating or reading alt message of image |