Javascript slideshow troubleshooting -
i creating javascript slideshow company, after writing code images not showing. goal of slide show expandable, can add more images if needed. going switching out previous , next html hyperlinks buttons. or suggestions appreciated.
<html> <head> <script language="javascript"> var interval = 1500; var random_display = 0; var imagedir = "v/vspfiles/templates/133/images/template/"; var imagenum = 0; imagearray = new array(); imagearray[imagenum++] = new imageitem(imagedir + "091814_banner.jpg"); imagearray[imagenum++] = new imageitem(imagedir + "0914_banner1.jpg") imagearray[imagenum++] = new imageitem(imagedir + "0914_banner-1_v2.jpg") imagearray[imagenum++] = new imageitem(imagedir + "navigation_background_left2.png") var totalimages = imagearray.length; function imageitem(image_location){ this.image_item = new image(); this.image_item.src = image_location; } function get_imageitemlocation(imageobj){ return(imageobj.image_item.src); } function randnum(x,y){ var range = y - x + 1; return math.floor(math,random() * range) + x; } function get_nextimage() { if(random_display){ imagenum = randnum(0,totalimages-1); } else{ imagenum = (imagenum + 1) % totalimages; } var new_image = get_imageitemlocation(imagearray[imagenum]); return (new_image); } function get_previmage(){ imagenum = (imagenum-1) % totalimages; var new_image = get_imageitemlocation(imagearray[imagenum]); returns(new_image); } function previmage(place){ var new_image = get_previmage(); document[place].src = new_image; } function switchimage(place) { var new_image = get_nextimage(); document[place].src = new_image; var recur_call = "switchimage('"+place+"')"; timerid = settimeout(recur_call,interval); } </script> </head> <body onload="switchimage('slideimg')"> <img name="slideimg" src="dsc09890.jpg" width=500 height=375 border=0> <a href="#" onclick="switchimage('slideimg')">play slide show</a> <a href="#" onclick="cleartimeout(timerid)"> pause</a> <a href="#" onclick="previmage('slideimg'); cleartimeout(timerid)"> previous</a> <a href="#" onclick="switchimage('slideimg'); cleartimeout(timerid)">next </a> </body> </html> edit
the slide show working properly. since working, looking creating buttons controls rather hyperlinks. planning on doing slideshow div. unsure how edit css , html make buttons appear on top of slideshow , stay in exact locations.
update
i have solved how create buttons. previous button not working however. of other buttons are.
how simplifying input code first, , rewriting accordingly? assuming images in same location, starting point create array containing images names:
(disclaimer: did not test code, may contain syntax errors, consider pseudo-code)
var images = ["image1.png","image2.jpg"]; assuming showing 1 image @ time on page, can keep global variable around containing index being shown.
var currentimage = 0; //starting image var imageelement = document.getelementbyid("slideimg") //put in id instead of 'name' accordingly, can re-use same < img > tag on page, need re-point it's image tag.
function navigate(direction) { switch(direction){ //using modulo , adding length of array, ensure positive offsets within array. case "back" : currentimage = (currentimage-- +images.length)%images.length; case "forward" : (currentimage++ +images.length)%images.length; } imageelement.src = images[currentimage]; } now should able call navigate function within onclick of elements add on page perform navigations. similarly, should able call within timer.
Comments
Post a Comment