How to create an SlideShow in javascript?

javascript slideshow

  • Ok this might sound stupid but I am suppose to Find a tutorial or code library (JQuery,Mootools) that allows you to create a JavaScript slideshow. Can someone please explain to me what is the different of JQuery and Mootools and what are they use for.Another I am not understand if I go find these places is it going to help me to do a slideshow. I already have one but my page is not working correct. Here is my code thanks for looking.I am also comfused about the I put the highway12.jpg in there but is only giving me 1 picture and not the slideshow. <head> <title>Javascript Slideshow</title> <script language="javascript"> <!-- var interval = 1500; var randome_display = 0; var imageDir = "my_images/"; var imageNum = 0; var totalImages = imageArrays.length; imageArray = new Array(); ImageArray[imageNum++] = new imageItem(imageDir + "highway12.jpg"); ImageArray[imageNum++] = new imageItem(imageDir + "lighthouse.jpg"); ImageArray[imageNum++] = new imageItem(imageDir + "landscape.jpg"); ImageArray[imageNum++] = new imageItem(imageDir + "shore.jpg"); ImageArray[imageNum++] = new imageItem(imageDir + "seashore.jpg"); ImageArray[imageNum++] = new imageItem(imageDir + "roughwaters.jpg"); ImageArray[imageNum++] = new imageItem(imageDir + "bigwave.jpg"); ImageArray[imageNum++] = new imageItem(imageDir + "sunset.jpg"); function imageItem(image_loaction) { this.image_item = new Image(); this.image_item.src = omage_loaction; } function get_ImageItemLoacation(imageObj) { return(imageObj.image_item.src) } function randNum(x ,y) { var range = y - x + 1; return Math.Floor(Math.random() * range) + x } function getNextImage() { if(random_display) { imageNum = randNum(0, totalImages-1); } else { imageNum = (imageNum+1) % totalImages; } var new_image = get_ImageItemLaction(imageArray[imageNum]); return(new_image); } function getPrevImage() { imageNum =(imageNum-1) % totalImages; var new_image = get_ImageItenLocation(imageArray[imageNum]); return(new_image); } function prevImage(place { var new_image = getPrevImage(); document[place].src= new_image; } function switchImage(place) { var new_image = getNextImage(); document[place].src =new_image; var recur_call = "switchImage(' "+place+"')'; timerID =setTimeout(recur_call, interval); } //--> </script> </head> <body> <img name="javascriptslid" src="highway12.jpg" width=400 height=300 border=5px align="middle"><br /> <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>

  • Answer:

    Choosing between two JS libraries is generally up to the specification and then preference. If you would like some help choosing with regards to specification you could try having a look here http://jqueryvsmootools.com/ I prefer jquery and have used this tutorial before which will help http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/

norris1023 at Stack Overflow Visit the source

Was this solution helpful to you?

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.