asked on

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>

TName

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);
}

sundaramkumar

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">

ASKER CERTIFIED SOLUTION

yaxh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ellie_07

ASKER

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>

SOLUTION

TName

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TName

Oh, the second version (with images) should be:
-------------------------- or images:

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