使用 Javascript 更改图片标签属性

Question

如何完成执行功能，以便在单击“下一张图片”按钮时显示图片数组中的下一张图片，当我到达数组末尾时，它应该从头开始数组的.. 因此，从本质上讲，“下一张图片”按钮就像一种循环浏览图像数组中的图像的方式。注意：数组第一个索引处的图像已经显示。所以当我点击按钮时，应该显示第二个索引处的图像..等等。

<!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>

Answer 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>

Answer 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>

使用 Javascript 更改图片标签属性

changing image tag attribute using Javascript

javascript

arrays

attributes

image

function