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>

​

当然，你还不能看这些图片。