[javascript] Izmenjava teksta in slik

Pozdravljeni dobri ljudje,
na spletu sem našel kodo za "slider" teksta in slik. Izmenjava je 3 sekunde. Hotel sem dodati še možnost, da s klikom na gumb naprej ali nazaj preskoči na naslednjo oziroma predhodno pozicijo.
Ko kliknem gumb za naprej, se interval pavze razpolovi, in vsak naslednji interval prikazovanja je krajši. :)

Kaj sem dodal ali spremenil v prvotni kodi:
1. Dodal sem kodo med 51 in 63 vrstico
2. Funkciji swapImage() sem dodal parameter(direction), prej je bila prazna; 38 vrstica
3. V HTML kodi sem onclick priredil funkciji swapImage('back' ali 'next'); spodnja koda 6 in 7 vrstica

- Gumb za naprej deluje, zamenja sliko in tekst, vendar zmanjša interval prikazovanja
- Gumb za nazaj deluje napačno in zamenja sliko in tekst naprej, tako kot zgornji gumb

javascript:

// Začetek Slideshow

var i = 0; 		// indeks polja

var image = new Array();   

// Seznam slik, prirejene vrednosti  

image[0] = vrednost_zdravje_slike; 
image[1] = vrednost_ljubezen_slike; 
image[2] = vrednost_druzina_slike;
image[3] = vrednost_finance_slike;   
image[4] = vrednost_druzabnost_slike;
image[5] = vrednost_storilnost_slike; 
image[6] = vrednost_ustvarjalnost_slike; 
image[7] = vrednost_rekreacija_slike;
image[8] = vrednost_spanec_slike;   
image[9] = vrednost_duhovnost_slike;


var k = image.length-1;    // število slik - 1 = 9

var caption = new Array(); 

// Seznam teksta, prirejene vrednosti   

caption[0] = vrednost_zdravje; 
caption[1] = vrednost_ljubezen; 
caption[2] = vrednost_druzina;
caption[3] = vrednost_finance;   
caption[4] = vrednost_druzabnost; 
caption[5] = vrednost_storilnost; 
caption[6] = vrednost_ustvarjalnost; 
caption[7] = vrednost_rekreacija;
caption[8] = vrednost_spanec;   
caption[9] = vrednost_duhovnost;

function swapImage(direction){ 

var el = document.getElementById("tekst_animacija"); 	
el.innerHTML=caption[i]; 

var slika = document.getElementById("slike_animacija"); 
slika.src = image[i];  

if(i < k ) { i++;}   // ko je index polja manjši od (število slik - 1) = 9
else  { i = 0; } 	// postavi zopet na začetek, prvo polje

setTimeout("swapImage()",3000);  // odmor 3 sekunde 

// dodatna koda za naprej in nazaj

 if (direction == 'next' && i <=8){  
 i++;  
 return i;
 }  
  
 if (direction == 'back' && i >=1){  
 i--;  
 return i;
 } 

// konec dodatne kode za naprej in nazaj

} 

function addLoadEvent(func) { 

var oldonload = window.onload; 		// onload event occurs when an object has been loaded

if (typeof window.onload != 'function') {  // typeof operator: vrne niz tipa neocenjenega operanda 
window.onload = func; 

} else  { 
window.onload = function() { 

if (oldonload) { 
oldonload(); 
} 

func(); 
} 		// konec else
;}		// konec window.onload = function()
}  		// konec addLoadEvent(func)

addLoadEvent(function() { 	// izvršitev funkcije addLoadEvent()
swapImage(); 
});  

// Konec Slideshow 

HTML:

<div id ="tekst_animacija">.....</div>
.......
<div>
<img name="slide" id="slike_animacija" alt ="slike za animacijo" height="220" width="240"/>
<input type="button" value="<" onclick="swapImage('back')">
<input type="button" value=">" onclick="swapImage('next')">
</div>

Hvala za pomoč. A koda se ni odzivala po mojih željah. Animacija se je zagnala samo en cikel, potem pa se je ustavila. Vrednosti k-jev je bilo potrebno tudi nekoliko popravljati.
Vrnil sem se k svoji "indijanski" kodi , sedaj se odziva tako kot sem si zamislil, takoj preskoči naprej in nazaj, vendar se intervali prikazovanja krajšajo z vsakim klikom naprej ali nazaj.

javascript:

function swapImage(direction){ 

// dodatna koda za naprej in nazaj
 
 if ((direction == 'next') && (i <=8)){ 
setTimeout("swapImage()",0);
 i; 
 return i;
 } 
   
 if ((direction == 'back') && (i >=1)){ 
setTimeout("swapImage()",0);
 i=i-2; 
 	if (i < 1) 
 	{i=0;}
 return i;
 }

clearTimeout(setTimeout("swapImage()",0));
 
// konec dodatne kode za naprej in nazaj

var el = document.getElementById("tekst_animacija"); 	
el.innerHTML=caption[i]; 

var slika = document.getElementById("slike_animacija"); 
slika.src = image[i];   

if(i < k ) {i++;}   // ko je index polja manjši od (število slik - 1) = 9
else  {i = 0;}    // postavi zopet na začetek, prvo polje

setTimeout("swapImage()",3000); // odmor 3 sekunde

clearTimeout(setTimeout("swapImage()",3000));

} 

function addLoadEvent(func) { 

var oldonload = window.onload; 		// onload event occurs when an object has been loaded

if (typeof window.onload != 'function') {  // typeof operator: vrne niz tipa neocenjenega operanda 
window.onload = func; 

} else  { 
window.onload = function() { 

if (oldonload) { 
oldonload(); 
} 

func(); 
} 		// konec else
;}		// konec window.onload = function()
}  		// konec addLoadEvent(func)

addLoadEvent(function() { 	// izvršitev funkcije addLoadEvent()
swapImage(); 
});  

// Konec Slideshow

HTML:

<div id ="tekst_animacija">.....</div>
.......
<div>
<img name="slide" id="slike_animacija" alt ="slike za animacijo" height="220" width="240"/>
<input type="button" value="<" onclick="swapImage('back')">
<input type="button" value=">" onclick="swapImage('next')">
</div>