给 <div class='image-container'> <img src='data:image/jpeg;base64,$show_image' alt='图片'> <div class='navigation-buttons'> <button class='prev-button'> << </button> <button class='next-button'> >> </button> </div> </div> 按钮添加响应时间

你可以使用JavaScript为这两个按钮添加事件监听器，以便在单击按钮时切换图像。以下是一个简单的示例代码：

<div class='image-container'>
  <img src='data:image/jpeg;base64,<?php echo $show_image; ?>' alt='图片'>
  <div class='navigation-buttons'>
    <button class='prev-button'> << </button>
    <button class='next-button'> >> </button>
  </div>
</div>

<script>
  var image = document.querySelector('.image-container img');
  var prevButton = document.querySelector('.prev-button');
  var nextButton = document.querySelector('.next-button');

  prevButton.addEventListener('click', function() {
    /* 切换到前一张图片的逻辑 */
  });

  nextButton.addEventListener('click', function() {
    /* 切换到后一张图片的逻辑 */
  });
</script>

在此示例中，我们首先使用querySelector()方法获取图像和两个按钮元素。然后，我们使用addEventListener()方法为每个按钮添加一个click事件监听器。监听器的函数可以包含切换图像的逻辑，例如：

prevButton.addEventListener('click', function() {
  /* 获取当前图片的索引 */
  var currentIndex = /* TODO: 根据图片源从数组中获取当前索引 */;
  
  /* 计算前一张图片的索引 */
  var prevIndex = (currentIndex + images.length - 1) % images.length;
  
  /* 切换到前一张图片 */
  image.src = images[prevIndex];
});

类似地，你可以编写代码来实现切换到下一张图片。