How to loop a series of images w/javascript

Hi,
The below javascript changes a series of images by clicking on the forward or backward arrow.  I want to find out how the javascript could be written to loop (go through the images without needing to return to the beginning by using the previous arrow).   Already had help with this and don't know any javascript, Thank you! Ellie


<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].src = "images/fig01-1.jpg";
pics[1].src = "images/fig01-2.jpg";
pics[2].src = "images/fig01-3.jpg";
pics[3].src = "images/fig01-4.jpg";
pics[4].src = "images/fig01-5.jpg";

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

function nextPic() {
   currentPhoto++;
   if (currentPhoto < pics.length) {
           changePhoto(currentPhoto);
   }
}

 function prevPic() {
    if (currentPhoto > 0) {
        currentPhoto--;
        changePhoto(currentPhoto);
      }
 }

//]]>
</script>


<body>


<img src="images/fig01-1.jpg" alt="" name="images" width="432" height="288" id="images"
    <p>
<a href="" onclick="prevPic(); return false;" "MM_effectAppearFade(this, 1000, 100, 0, returnfalse);"><</a> <a href= "" onclick="nextPic(); return false;">></a>


</body>
ellie_07Asked:
Who is Participating?
 
yaxhConnect With a Mentor Commented:
My answer would be this:

<html>
<head><title>Change Images </title>
<script type="text/javascript">
var currentPhoto = 2;
var pics = new Array();
for (var i = 0; i < 5; i++) {
  pics[i] = new Image();
}
pics[0].src = "images/fig01-1.jpg";
pics[1].src = "images/fig01-2.jpg";
pics[2].src = "images/fig01-3.jpg";
pics[3].src = "images/fig01-4.jpg";
pics[4].src = "images/fig01-5.jpg";

function changePhoto(photoIndex) {
       try{
            document.getElementById('images').src = pics[photoIndex].src;
       }catch (e){
            alert(e);
       }
}

function nextPic(move) {
   if(move == "backward"){
          currentPhoto--;
            if(currentPhoto<0){
             currentPhoto=pics.length-1;
            }
   }else{
         currentPhoto++;
         if (currentPhoto == pics.length) {
          currentPhoto = 0
         }
   }
   changePhoto(currentPhoto);
}
</script>
</head>
<body>
<img src="images/fig01-1.jpg" alt="" name="images" width="432" height="288" id="images" />
<br />
<input type="button" value='<<' onclick="nextPic('backward')" /> <input type="button" value='>>' onclick="nextPic('forward')" />
</body>
</html>
0
 
TNameCommented:
Hi, in case I understand you correctly - you could try changing these 2 functions like this:

function nextPic() {
   currentPhoto++;
   if (currentPhoto >= pics.length) {
           currentPhoto=0;
   }
   changePhoto(currentPhoto);
}

 function prevPic() {
    if (currentPhoto >0) {
        currentPhoto--;      
      }else{
        currentPhoto=pics.length-1;
      }
 changePhoto(currentPhoto);
 }
0
 
sundaramkumarCommented:
you have to change the two functions as follows
function nextPic() {
   currentPhoto++;
   if(currentPhoto==5)currentPhoto=0;
   alert(currentPhoto);
   if (currentPhoto < pics.length) {
           changePhoto(currentPhoto);
   }
}

 function prevPic() {       
    if (currentPhoto > 0) {
        currentPhoto--;
       
      }else{
            currentPhoto=pics.length-1;
      }
      changePhoto(currentPhoto);
 }

also change the function changePhoto
as
function changePhoto(photo) {
      //document.images[0].src = pics[photo].src;
      document.getElementById('images').src = pics[photo].src;
}

If you want this to work in all modern browsers then use document.getElementById.
also there is a typo in this line.

<img src="images/fig01-1.jpg" alt="" name="images" width="432" height="288" id="images"

the img tag is not closed properly. change as

<img src="images/fig01-1.jpg" alt="" name="images" width="432" height="288" id="images">
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
ellie_07Author Commented:
Hi,
 This one seems to be working but is there a way to change the input type?  (I want there to be arrows but no button, meaning just arrows to click)  Thanks! Hope this is the right way to extend the question! Ellie

<html>
<head><title>Change Images </title>
<script type="text/javascript">
var currentPhoto = 2;
var pics = new Array();
for (var i = 0; i < 5; i++) {
  pics[i] = new Image();
}
pics[0].src = "images/fig01-1.jpg";
pics[1].src = "images/fig01-2.jpg";
pics[2].src = "images/fig01-3.jpg";
pics[3].src = "images/fig01-4.jpg";
pics[4].src = "images/fig01-5.jpg";

function changePhoto(photoIndex) {
       try{
            document.getElementById('images').src = pics[photoIndex].src;
       }catch (e){
            alert(e);
       }
}

function nextPic(move) {
   if(move == "backward"){
          currentPhoto--;
            if(currentPhoto<0){
             currentPhoto=pics.length-1;
            }
   }else{
         currentPhoto++;
         if (currentPhoto == pics.length) {
          currentPhoto = 0
         }
   }
   changePhoto(currentPhoto);
}
</script>
</head>
<body>
<img src="images/fig01-1.jpg" alt="" name="images" width="432" height="288" id="images" />
<br />
<input type="button" value='<<' onclick="nextPic('backward')" /> <input type="button" value='>>' onclick="nextPic('forward')" />
</body>
</html>
0
 
TNameConnect With a Mentor Commented:
>is there a way to change the input type?  (I want there to be arrows but no button, meaning just arrows to click)

Well, you could use divs with background-images or plain images instead of inputs, e.g.


--------------------------------------------------divs with background-images:

<style>
#arrowBack {width:50px; height:30px; background-image:url(arrow1.gif); background-repeat:no-repeat; float:left;}
#arrowForward {width:50px; height:30px; background-image:url(arrow2.gif); background-repeat:no-repeat; float:left;}
</style>

<div id="arrowBack" onclick="nextPic('backward')" >&nbsp;</div>
<div id="arrowForward" onclick="nextPic('forward')" >&nbsp;</div>


--------------------------   or images:

<img src="arrow1.gif" onclick="nextPic('backward')" >&nbsp;</img>
<img src="arrow2.gif" onclick="nextPic('forward')" >&nbsp;</img>


-----------
In both cases, arrow1.gif and arrow2.gif would be some images of arrows of course ;)
0
 
TNameCommented:
Oh, the second version (with images) should be:
--------------------------   or images:

<img src="arrow1.gif" onclick="nextPic('backward')">
<img src="arrow2.gif" onclick="nextPic('forward')">

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.