使用 Javascript 更改图像标签属性答案

【问题标题】：changing image tag attribute using Javascript使用 Javascript 更改图像标签属性
【发布时间】：2021-07-08 09:03:59
【问题描述】：

如何完成执行功能，这样当点击 Next Image 按钮时，会显示 images 数组中的下一张图像，当我到达数组的末尾时，它应该从数组的开头开始数组.. 所以本质上，下一个图像按钮的作用就像是循环浏览图像数组中的图像的一种方式。注意：数组第一个索引处的图像已经显示。所以当我点击按钮时，应该显示第二个索引处的图像..等等。

<!DOCTYPE html>
<html>

  <head>

  </head>

  <body>
    <button onclick='execute()'>Next Image</button>
    <div>
      <img src='https://bocageanimalhospital.com/wp-content/uploads/2020/09/iconfinder_1F431-cat-face_4888130.png' />
    </div>
  </body>
  <script>
    const images = [
  'https://bocageanimalhospital.com/wp-content/uploads/2020/09/iconfinder_1F431-cat-face_4888130.png',
  'https://catdoctorofmonroe.com/wp-content/uploads/2020/09/iconfinder_1F408-cat-B_4888072.png',
  'https://aux.iconspalace.com/uploads/cat-clean-icon-256.png'
    ]

    function execute() {
  
    }

  </script>

</html>

【问题讨论】：

到目前为止你有什么尝试？

标签： javascript arrays image function attributes

【解决方案1】：

在execute 函数之外保留一个索引变量，并在每次单击Next 按钮时递增它。如果索引值超过 images 数组的长度，则将其重置为 0。

const images = [
  'https://bocageanimalhospital.com/wp-content/uploads/2020/09/iconfinder_1F431-cat-face_4888130.png',
  'https://catdoctorofmonroe.com/wp-content/uploads/2020/09/iconfinder_1F408-cat-B_4888072.png',
  'https://aux.iconspalace.com/uploads/cat-clean-icon-256.png'
];

const nextBtn = document.getElementById('next-btn');
const image = document.getElementById('image');
let imageIndex = 0;
image.setAttribute('src', images[imageIndex]);

const execute = (event) => {
  imageIndex++;

  if (imageIndex >= images.length) {
    imageIndex = 0;
  }

  image.setAttribute('src', images[imageIndex]);
}

nextBtn.addEventListener('click', execute);

<img src="https://bocageanimalhospital.com/wp-content/uploads/2020/09/iconfinder_1F431-cat-face_4888130.png" id="image" />
<button id="next-btn">Next</button>

【讨论】：

【解决方案2】：

您可以在循环时为数组设置一个简单的索引跟踪器，如果它到达图像数组的末尾则重置。

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <button onclick='execute()'>Next Image</button>
  <div>
    <img id="image-holder" src='https://bocageanimalhospital.com/wp-content/uploads/2020/09/iconfinder_1F431-cat-face_4888130.png' />
  </div>
</body>
<script>
  const images = [
    'https://bocageanimalhospital.com/wp-content/uploads/2020/09/iconfinder_1F431-cat-face_4888130.png',
    'https://catdoctorofmonroe.com/wp-content/uploads/2020/09/iconfinder_1F408-cat-B_4888072.png',
    'https://aux.iconspalace.com/uploads/cat-clean-icon-256.png'
  ]
  var cIndex = 0

  function execute() {
    cIndex = cIndex + 1
    if (cIndex > images.length - 1) {
      cIndex = 0
    }
    document.getElementById("image-holder").src = images[cIndex]
  }
</script>

</html>

【讨论】：