JavaScriptイメージギャラリー2

Question

この質問が以前に聞かれたかどうかわかりません。私は、このHTMLのための次の画像および前の画像機能を入れしようとしている

<img id="imageDisplay"> 

<script type="text/javascript"> 
    var displayImage = document.querySelector('#imageDisplay'); 

    var imageArray = [ 'http://www.joongcho.com/Images/30th-Bday-Party-01.jpg', 
         'http://www.joongcho.com/Images/30th-Bday-Party-02.jpg', 
         'http://www.joongcho.com/Images/30th-Bday-Party-03.jpg', 
         'http://www.joongcho.com/Images/30th-Bday-Party-04.jpg', 
         'http://www.joongcho.com/Images/30th-Bday-Party-05.jpg', 
         'http://www.joongcho.com/Images/30th-Bday-Party-06.jpg' ]; 
    var imageCount = 0; 
    var imageLength = imageArray.length; 

    displayImage.setAttribute('src', imageArray[ imageCount ]); 

    function nextImage(imageCount) { 
    } 

    function previousImage(imageCount) { 
    } 
</script> 

：しかし...

私は私のHTMLファイル内に次のJavaScriptコードを持っています。

次のイメージでは、複数のイメージがあり、イメージが最後のイメージではない場合、ユーザーがアレイの前方をクリックできるリンクが必要です。また、イメージが配列内の最後のイメージである場合、リンクは非表示になります。

前の画像では、画像が配列の最初の画像でない場合、ユーザーが配列を後ろ向きにクリックできるリンクが必要です。イメージが最初のイメージの場合、前のリンクは非表示にする必要があります。

何か助けていただければ幸いです。あなたは（私はボタンを使用）ボタンまたはリンクにイベントリスナーを添付する必要があり

Answer 1

：もちろん

var displayImage = document.getElementById('imageDisplay'); 
 
var buttonPrev = document.getElementById('button-prev'); 
 
var buttonNext = document.getElementById('button-next'); 
 

 
var imageArray = [ '../Images/30th-Bday-Party-01.jpg', 
 
         '../Images/30th-Bday-Party-02.jpg', 
 
         '../Images/30th-Bday-Party-03.jpg', 
 
         '../Images/30th-Bday-Party-04.jpg', 
 
         '../Images/30th-Bday-Party-05.jpg', 
 
         '../Images/30th-Bday-Party-06.jpg' ]; 
 
var imageCount = 0; 
 
var imageLength = imageArray.length; 
 

 
function nextImage() { 
 
    imageCount++; 
 
    if (imageCount >= imageLength - 1) { 
 
    buttonNext.style.display = 'none'; 
 
    imageCount = imageLength - 1; 
 
    } 
 
    if (imageCount < imageLength) { 
 
    displayImage.setAttribute('src', imageArray[imageCount]); 
 
    } 
 
    if (imageCount > 0) { 
 
    buttonPrev.style.display = 'inline'; 
 
    } 
 
} 
 

 
function previousImage() { 
 
    imageCount--; 
 
    if (imageCount <= 0) { 
 
    buttonPrev.style.display = 'none'; 
 
    imageCount = 0; 
 
    } 
 
    if (imageCount >= 0) { 
 
    displayImage.setAttribute('src', imageArray[imageCount]); 
 
    } 
 
    if (imageCount < imageLength) { 
 
    buttonNext.style.display = 'inline'; 
 
    } 
 
} 
 

 
displayImage.setAttribute('src', imageArray[imageCount]); 
 
displayImage.textContent = imageCount; 
 
buttonPrev.style.display = 'none'; 
 
buttonNext.addEventListener('click', nextImage); 
 
buttonPrev.addEventListener('click', previousImage);

<img id="imageDisplay" /> 
 
<button id="button-prev">Back</button> 
 
<button id="button-next">Forward</button>

を、あなたはまだ、画像を見ることができません。