Javascriptでスライドショー機能が動作しない

Question

スライドショー用の動的コードを作成しようとしています。私は何度もそれを見てきました、私はすべてが正しいと思いますが、うまくいきません。私はどこにバグがあるのか​​分かりません。私は誰が間違っているものを私を見ることができます願っています：

<button type="button" id="back">&lt;&lt;</button> 

<button type="button" id="forward">&gt;&gt;</button> 

<img id="photo" src="http://photo.interpressnews.ge/img/image1/b37065d8bf0bd9e25d5bcb3c144b0269.jpg" width="200 height="200> 

とJavascript：

var photos = new Array("http://photo.interpressnews.ge/img/image1/b37065d8bf0bd9e25d5bcb3c144b0269.jpg", "http://photo.interpressnews.ge/img/image1/c81dae9175d056aa243a5a0e56b3c111.jpg", "http://photo.interpressnews.ge/img/image1/5ff96384ddf214ef33706ffdb922b710.jpg"); 
var imgnumber = 0; 
var imgleng = photos.length - 1; 
var img = document.getElementById("photo"); 
var current = photos.indexOf(img.src); 
var nextindex; 
var back = document.getElementById("back"); 
var forward = document.getElementById("forward"); 
back.addEventListener('click', toggleImage('back')); 
forward.addEventListener('click', toggleImage('forward')); 

function toggleImage(direction) { 
    if(direction == 'forward'){ 
    nextindex = current != photos.length - 1 ? current + 1 : 0; 
    } else { 

    nextindex = current != 0 ? current - 1 : photos.length - 1; 
    } 
    img.src = photos[nextindex]; 
} 

Answer 1

問題がonclickイベントに関係しています。関数をイベントリスナーにバインドするのではなく、呼び出しています。パラメータ 'back'または 'forward'を指定した関数呼び出しは、関数内になければなりません。ここに訂正されたコードがあります：

var photos = new Array("http://photo.interpressnews.ge/img/image1/b37065d8bf0bd9e25d5bcb3c144b0269.jpg", "http://photo.interpressnews.ge/img/image1/c81dae9175d056aa243a5a0e56b3c111.jpg", "http://photo.interpressnews.ge/img/image1/5ff96384ddf214ef33706ffdb922b710.jpg"); 
    var imgnumber = 0; 
    var imgleng = photos.length - 1; 
    var img = document.getElementById("photo"); 
    var current = photos.indexOf(img.src); 
    var nextindex; 
    var back = document.getElementById("back"); 
    var forward = document.getElementById("forward"); 
    back.addEventListener('click', function(){toggleImage('back')}); 
    forward.addEventListener('click', function(){toggleImage('forward')}); 

    function toggleImage(direction) { 
     if(direction == 'forward'){ 
     current = current != photos.length - 1 ? current + 1 : 0; 
     } else { 
     current = current != 0 ? current - 1 : photos.length - 1; 
     } 
     img.src = photos[current]; 
    }