JavaScript圖片庫2

我不知道這個問題之前是否被問過。但是......JavaScript圖片庫2

我在我的HTML文件下面的JavaScript代碼：

<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此之前的圖像功能。

對於下一張圖片，如果圖片超過1張且圖片不是最後一張圖片，則應該有一個鏈接，允許用戶點擊數組向前。此外，如果圖像是數組中的最後一個圖像，則隱藏鏈接。

對於之前的圖像，如果圖像不是數組的第一個圖像，那麼應該有一個鏈接，允許用戶向後單擊數組。如果圖像是第一個圖像，則應隱藏前一個鏈接。

任何幫助表示讚賞。

來源

2017-05-28 CaptSpirk

你必須給事件偵聽器附加到按鈕或鏈接（我使用的按鈕）：

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>

當然，你不能在圖像看起來還沒有。

來源

2017-05-28 15:47:41 PeterMader

當我在我的終端上運行此代碼時，它可以正常工作，但是當您單擊上一個按鈕時，下一個按鈕將完全消失，而不會再次前進。此外，你不能去我的第一個圖像。此外，您可以將以下內容添加到圖像部分：'http://www.joongcho.com/Images/'以查看它的工作。謝謝。 – CaptSpirk

這個工作現在有一些調整，但它不適用於所有瀏覽器。例如，它可以在谷歌瀏覽器中正常工作，但由於某種原因，它在IE 11+中無法正常工作。下一個按鈕正常工作，但上一個按鈕不會顯示在Internet Explorer中。 [link] http://www.joongcho.com/downloads/random-a.htm [/ link]就是例子。謝謝。 – CaptSpirk

是的你是對的。似乎IE不支持['initial']（https://developer.mozilla.org/en/docs/Web/CSS/initial）。我編輯了我的答案，現在它應該可以工作。 – PeterMader

JavaScript圖片庫2

回答

相關問題