Find solution
How to create an SlideShow in javascript?

Need Help creating a slideshow with JavaScript?

  • I'm still really slow when it comes to creating functions in JavaScript. I want to create a slide show from my images but I'm not too sure how to do so. Here's what I have so far: <!doctype html> <html> <head> <title>Photo Viewer</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- Must add Photo Viewer as the title along with underlining it --> </head> <body style="background-color:#fff1cc"> <div id="show" class="slideshow"> <div class="slideshow-images"> <a href=""><img id="slide-0" src="data/images/college16.jpg" alt="college16" title="college16" /></a> <a href=""><img id="slide-1" src="data/images/college15.jpg" alt="college15" title="college15" /></a> <a href=""><img id="slide-2" src="data/images/college14.jpg" alt="college14" title="college14" /></a> <a href=""><img id="slide-3" src="data/images/college13.jpg" alt="college13" title="college13" /></a> <a href=""><img id="slide-4" src="data/images/college12.jpg" alt="college12" title="college12" /></a> <a href=""><img id="slide-5" src="data/images/college11.jpg" alt="college11" title="college11" /></a> <a href=""><img id="slide-6" src="data/images/college10.jpg" alt="college10" title="college10" /></a> <a href=""><img id="slide-7" src="data/images/college9.jpg" alt="college9" title="college9" /></a> <a href=""><img id="slide-8" src="data/images/college8.jpg" alt="college8" title="college8" /></a> <a href=""><img id="slide-9" src="data/images/college7.jpg" alt="college7" title="college7" /></a> <a href=""><img id="slide-10" src="data/images/college6.jpg" alt="college6" title="college6" /></a> <a href=""><img id="slide-11" src="data/images/college5.jpg" alt="college5" title="college5" /></a> <a href=""><img id="slide-12" src="data/images/college4.jpg" alt="college4" title="college4" /></a> <a href=""><img id="slide-13" src="data/images/college3.jpg" alt="college3" title="college3" /></a> <a href=""><img id="slide-14" src="data/images/college2.jpg" alt="college2" title="college2" /></a> <a href=""><img id="slide-15" src="data/images/college1.jpg" alt="college1" title="college1" /></a> </div> <div class="slideshow-thumbnails"> <ul> <li><a href="#slide-0"><img src="data/thumbnails/college16.jpg" alt="college16" /></a></li> <li><a href="#slide-1"><img src="data/thumbnails/college15.jpg" alt="college15" /></a></li> <li><a href="#slide-2"><img src="data/thumbnails/college14.jpg" alt="college14" /></a></li> <li><a href="#slide-3"><img src="data/thumbnails/college13.jpg" alt="college13" /></a></li> <li><a href="#slide-4"><img src="data/thumbnails/college12.jpg" alt="college12" /></a></li> <li><a href="#slide-5"><img src="data/thumbnails/college11.jpg" alt="college11" /></a></li> <li><a href="#slide-6"><img src="data/thumbnails/college10.jpg" alt="college10" /></a></li> <li><a href="#slide-7"><img src="data/thumbnails/college9.jpg" alt="college9" /></a></li> <li><a href="#slide-8"><img src="data/thumbnails/college8.jpg" alt="college8" /></a></li> <li><a href="#slide-9"><img src="data/thumbnails/college7.jpg" alt="college7" /

  • Answer:

    Your code got cut off. I don't think this was how you were supposed to do it. I've done an example, if you want to check it out. HTML: http://pastebin.com/8snhjKEu JS: http://pastebin.com/zq7kbyrY I'm sure you know where to download the jpg files and how to arrange the folders.

Dominic at Yahoo! Answers Visit the source

Was this solution helpful to you?

Related Q & A:

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.