• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3926
  • Last Modified:

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>
0
ellie_07
Asked:
ellie_07
2 Solutions
 
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
 
yaxhCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
TNameCommented:
>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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now