JavaScript 图片库 2

Question

我不知道以前是否有人问过这个问题。但是……

我的 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 个图像并且该图像不是最后一个图像，那么应该有一个链接，允许用户单击数组向前。此外，如果图像是数组中的最后一个图像，则隐藏链接。

对于前一个图像，如果该图像不是数组的第一个图像，那么应该有一个链接允许用户向后单击数组。如果图像是第一张图像，则应隐藏上一个链接。

感谢任何帮助。

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>

当然，你还不能看图片。