Question

注意： 我看了here关于如何更改计时器上的图像，与使用按钮相反，但它并不适合我代码风格。

由于我是HTML和JS的新手，我仍然不了解所有方面，并且对于他们在翻译中指代我编写代码的方式有点困惑。

CODE：

<!DOCTYPE html>
<html>
  <body>
    <img id="image" src="blank_light.jpg" style="width:100px">
    <p></p>
    <button class="change-image">Change Lights</button>
    <script>
      var imageSources = ["red_light.jpg", "red_and_yellow_light.jpg", "yellow_light.jpg", "green_light.jpg"]
      var buttons = document.getElementsByClassName("change-image")[0];
      var index = 0;

      buttons.addEventListener('click', function() {
        if (index === imageSources.length) {
          index = 0;
        }
        document.getElementById("image").src = imageSources[index];
        index++;
      });

    </script>
  </body>
</html>

我需要删除按钮，并在定时的基础上更改图像。理想情况下每2秒钟一次。

提前致谢。

Answer 1

您需要使用setInterval函数每2秒更改一次图像

<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>

<script>

var imageSources = ["red_light.jpg", "red_and_yellow_light.jpg", "yellow_light.jpg", "green_light.jpg"]

var index = 0;
setInterval (function(){
  if (index === imageSources.length) {
    index = 0;
  }
  document.getElementById("image").src = imageSources[index];
  index++;
} , 2000);

</script>

CodePen：http://codepen.io/anon/pen/zNWMJK

Answer 2

webSoup = BeautifulSoup(html, 'html.parser')
nextUrl = webSoup.findChildren()[2][0]

如何使用JavaScript自动更改HTML图像

2 个答案: