problem with slides that appear to go out of order

I'm a newbie to javascript and I'm having a problem with my slideshow

[bellafaith]

I'm pretty new to javascript and I'm not really sure where the problem is - so I'm sorry if there is irrelevant code listed below. I have a slideshow that uses the following javascript. Onload, it starts an automatic rotation through the slides & then there are previous/next buttons as well as individual buttons for each slide. In the html, I use something like <img src="clear.png" id="slideOne" onclick="DisplaySlides(0)" /> to call the individual slides. Once a previous/next or individual button is clicked, the automatic rotation stops. My problem is if you click the individual button to display slide 3 and the last slide shown was 1, then if you click next button, instead of going to slide 4, it takes you to slide 2 (like its going back to original order). Anyone know what could be causing this or see a way to fix my code?

Thanks!

window.onload = InitAll;
var num=0;
var slide_num=0;
// format: src, text, headline, 1st link, 2nd link, 3rd link, new class
imgArray = [ 
 ['a.jpg', 
 'DescriptionA',
 'TitleA',
 'Link 1A',
 'Link 1B',
 'Link 1C',
 'Link 1D'],
 ['b.jpg', 
 'DescriptionB',
 'TitleB',
 'Link 2A',
 'Link 2B',
 'Link 2C',
 'Link 2D'],
 ['c.jpg', 
 'DescriptionC',
 'TitleC',
 'Link 3A',
 'Link 3B',
 'Link 3C',
 'Link 3D'],
 ['c.jpg', 
 'DescriptionD',
 'TitleD',
 'Link 4A',
 'Link 4B',
 'Link 4C',
 'Link 4D']
];
function InitAll() {
InitTimeInterval();
document.getElementById("prevLink").onclick=processPrevious;
document.getElementById("nextLink").onclick=processNext;
}
function LimitNumber(value) {
 if (value < 0) { value = imgArray.length - 1; }
 var value = value % imgArray.length;
 return value; 
}
function slide(slide_num,Mypic,Mylbl,imgTitle,imgLinkA,imgLinkB,imgLinkC,imgLinkD) {
document.getElementById("Mypic").src=imgArray[slide_num][0];
document.getElementById("Mylbl").innerHTML=imgArray[slide_num][1];
document.getElementById("imgTitle").innerHTML=imgArray[slide_num][2];
document.getElementById("imgLinkA").innerHTML=imgArray[slide_num][3];
document.getElementById("imgLinkB").innerHTML=imgArray[slide_num][4];
document.getElementById("imgLinkC").innerHTML=imgArray[slide_num][5];
document.getElementById("imgLinkD").innerHTML=imgArray[slide_num][6];
}
function TimedImage() {
 slide_num++;
 slide_num = LimitNumber(slide_num);
 slide(slide_num);
}
var timedFunc = '';
function InitTimeInterval() {
 timedFunc = setInterval("TimedImage()",6000);
 }
 
 function DisplaySlides(slide_num) {
 clearInterval(timedFunc);
 slide(slide_num);
}
 
function processPrevious() {
if (slide_num == 0) {
slide_num = imgArray.length;
};
slide_num--;
DisplaySlides(slide_num);
}
function processNext() {
slide_num++;
if (slide_num == imgArray.length) {
slide_num = 0;
};
DisplaySlides(slide_num);
}

[whoisgregg]

Welcome to WebmasterWorld, bellafaith!

You'll see a variable in your code called

slide_num

. Each time the next or previous function is called it takes the current value of that variable and either increases it by one (++) or decreases it by one (--);

To make it continue from the last slide selected, you'll need to modify your DisplaySlides() function just a bit so it can successfully change the value of the global

slide_num

variable each time it's called. Basically, it's just a matter of changing a variable name and adding one line:

function DisplaySlides(go_to_slide_num) { 
slide_num = go_to_slide_num;
clearInterval(timedFunc); 
slide(slide_num); 
}