?
Solved

simple slide show with javascript

Posted on 2007-07-25
5
Medium Priority
?
352 Views
Last Modified: 2010-08-05
Hi,
I'm trying to include this javascript in a web page but it isn't working and I really don't know any javascript.  I would like to be able to run a simple slide show where an image changes to the next one when the arrow button is clicked.   This is loading the first image but not showing any others when the arrow is clicked.  Thank you!!

this is the script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Experiment 4</title>
<script type="text/javascript">
//<![CDATA[

var currentPhoto = 0;
var pics = new Array();
for (var i = 0; i < 5; i++) {
  pics[i] = new Image();
}
pics[0].scr = "images/fig01-1.jpg";
pics[1].scr = "images/fig01-2.jpg";
pics[2].scr = "images/fig01-3.jpg";
pics[3].scr = "images/fig01-4.jpg";
pics[4].scr = "images/fig01-5.jpg";

function changePhoto(photo) {
      document.images[0].scr = pics[photo].src;
}

function nextPic() {
   currentPhoto++;
   if (currentPhoto < pics.length) {
           changePhoto(currentPhoto);
   } else {
     alert("at the end of the photo list");
   }
 }
 function prevPic() {
    if (currentPhoto > 0) {
        currentPhoto--;
        changePhoto(currentPhoto);
      } else {
        alert("at the beginning of the photo list");
      }
}

//]]>
</script>
<img src= "images/fig01-1.jpg" />
<p>
<a href="" onclick="nextPic();returnfalse">></a> <a href= "" onclick="prevPic(); return false"><</a>
<p>                                      
</head>

</body>

</html>


0
Comment
Question by:ellie_07
  • 3
5 Comments
 
LVL 8

Assisted Solution

by:thenone
thenone earned 640 total points
ID: 19568726
do you have 5 images named like this

images/fig01-1.jpg";
pics[1].scr = "images/fig01-2.jpg";
pics[2].scr = "images/fig01-3.jpg";
pics[3].scr = "images/fig01-4.jpg";
pics[4].scr = "images/fig01-5.jpg";
0
 
LVL 9

Assisted Solution

by:danataylor
danataylor earned 640 total points
ID: 19569035
Not sure if this is it but there should be a space between "return" and "false" in the first onclick event.  Should probably be a semicolon after false, too.  Double >>?

<a href="" onclick="nextPic();return false;"></a> <a href= "" onclick="prevPic(); return false;"></a>
0
 
LVL 6

Accepted Solution

by:
gjutras earned 720 total points
ID: 19569112
is it the typo at

document.images[0].scr = pics[photo].src;

should be

document.images[0].src = pics[photo].src;
0
 
LVL 6

Expert Comment

by:gjutras
ID: 19569119
as well as the space mentioned
0
 
LVL 6

Expert Comment

by:gjutras
ID: 19569137
also

pics[0].scr = "images/fig01-1.jpg";
pics[1].scr = "images/fig01-2.jpg";
pics[2].scr = "images/fig01-3.jpg";
pics[3].scr = "images/fig01-4.jpg";
pics[4].scr = "images/fig01-5.jpg";

shoudl all have .src instead of .scr
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question