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添加下一个Image和之前的Image函数。

对于下一张图片，如果有超过1张图片并且图片不是最后一张图片，那么应该有一个链接允许用户向前点击数组。此外，如果图像是数组中的最后一个图像，则隐藏链接。

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

感谢任何帮助。

Answer 1

您必须将事件侦听器附加到按钮或链接（我使用按钮）：

＆＃13;

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);

＆＃13;

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

＆＃13;

当然，你还不能看图像。

JavaScript图片库2

1 个答案: