Javascriptの画像ギャラリー：forとnextボタンのループが正しく機能しない

Question

JavaScriptを使用して画像ギャラリーを構築しています。

私はすべての画像を「画像」というフォルダに入れていて、それも配列にしているので、ループすることができます。

私は、次の画像を表示することを目的とした「次へ」ボタンと、前の画像を表示する「前の」ボタンとを持っています。 しかし、それは半分しか働いていません。次をクリックすると、配列の2番目の画像が表示され、他の画像は表示されません。前の画像をクリックすると空の画像が表示されます。ここで

は、私のJSコードである：ここで

var images = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg', 'images/6.jpg', 'images/7.jpg', 'images/8.jpg', 'images/9.jpg']; 
var index = 0; 
document.getElementById('imgsrc').src = images[index]; 

var next = document.getElementById('slider-next'); 
var previous = document.getElementById('slider-previous'); 
//NEXT BUTTON 

next.addEventListener('click', nextImage); 

function nextImage(){ 
    for(i = 0; i < 10; i++){ 
     document.getElementById('imgsrc').src = images[index + 1]; 
    } 
} 
//'Previous' button 

previous.addEventListener('click', previousImage); 

function previousImage(){ 
    for(i = 0; i < 10; i++){ 
     document.getElementById('imgsrc').src = images[index - 1]; 
    } 
} 

は私のHTMLです：私はここで間違っ

<section class="button"> 

    <button id="slider-previous"><i class="fa fa-backward" aria-hidden="true" class="icon"></i></button> 

    <button id="slider-toggle"><i class="fa fa-play" aria-hidden="true" class="icon"></i></button> 

    <button id="slider-next"><i class="fa fa-forward" aria-hidden="true" class="icon"></i></button> 

    <button id="slider-random"><i class="fa fa-random" aria-hidden="true"></i></button> 

</section> 

<section class="gallery"> 

    <img id='imgsrc' src=""> 

</section> 

何をしているのですか？

私はあなたがpreviousImageを呼び出すときにネクストイメージとデクリメントを呼び出すときにインデックスをインクリメントする必要があるすべての回答

Answer 1

なぜこれらのループを使用するのかわかりません。

とにかく、これらの機能をこのコードに置き換えてください。

function nextImage() { 
    index+=1; 
    if (index > images.length - 1) { 
    index = 0; 
    } 

    document.getElementById('imgsrc').src = images[index]; 

} 
//'Previous' button 

previous.addEventListener('click', previousImage); 

function previousImage(){ 
    index-=1; 
    if (index < 0) { 
    index = images.length - 1; 
    } 

    document.getElementById('imgsrc').src = images[index]; 

} 

Answer 2

を感謝しています。また、if文を追加して配列境界から外れるのを防ぎました。

function nextImage() { 
    if(index < images.length - 1) { 
    for (i = 0; i < 10; i++) { 
     document.getElementById('imgsrc').src = images[index++]; 
    } 
    } 
} 

function previousImage() { 
    if(index > 0) { 
    for (i = 0; i < 10; i++) { 
     document.getElementById('imgsrc').src = images[index--]; 
    } 
    } 
} 

Answer 3

//NEXT BUTTON 

next.addEventListener('click', nextImage); 

function nextImage(){ 
    if(index<images.length-1) 
    { 
     index++; 
     document.getElementById('imgsrc').src = images[index]; 
    } 

} 
//'Previous' button 

previous.addEventListener('click', previousImage); 

function previousImage(){ 
    if(index>0) 
    { 
    index--; 
    document.getElementById('imgsrc').src = images[index]; 
    } 

}