Question

我正在开展一个项目，一旦点击其中一个，我想让4个图像以圆形方式移动。这就是我到目前为止所做的，但我无法弄清楚如何使这个圈继续前进。有什么帮助吗？

<!DOCTYPE html>
<html>
<head>
<title> Lab 13B </title>
<style>
    #pic1 {
        padding-left:325px;
    }
    #pic2 {
        padding-top: 100px;
    }
    #pic3 {
        padding-left: 350px;
        padding-top: 100px;
    }
    #pic4 {
        padding-left: 325px;
        padding-top: 120px;
    }
</style>
<script>
    function one() {
        document.getElementById("pic1").src = "water.PNG";
        document.getElementById("pic2").src = "fire.PNG";
        document.getElementById("pic3").src = "Air.PNG";
        document.getElementById("pic4").src = "earth.PNG";
        document.getElementById("pic1").id = "pic2";
        document.getElementById("pic2").id = "pic4";
        document.getElementById("pic3").id = "pic1";
        document.getElementById("pic4").id = "pic3";
    }
</script>
</head>
<body>
    <img src = "Air.PNG" alt="air" width="300px" height="300px" id="pic1" onclick="one()";> <br>
    <img src = "water.PNG" alt="water" width="300px" height="300px" id="pic2" onclick="one()";> 
    <img src = "earth.PNG" alt="earth" width="300px" height="300px" id='pic3' onclick="one()";> <br>
    <img src = "fire.PNG" alt="fire" width="300px" height="300px" id='pic4' onclick="one()";> 
</body>
</html>

Answer 1

你实际上是在谈论一个动画，你需要在特定的时间间隔后改变一些东西。

为了实现这样的功能，Javascript提供了setInterval函数，您可以在给定的间隔（毫秒）之后运行一段负责“更改”的代码。所以你的函数one看起来像

function one() {
  setInterval(function() {
    // your logic for swapping src of images
  }, 1000)
}

但是这将要求你正确处理点击事件，第一次点击将启动动画，但第二次将再次创建间隔，依此类推，所以考虑到这一点，如果你已经有间隔运行，那么第二次点击你可能想要停止动画或至少阻止创建第二个间隔。这可能会有所帮助Is there any way to kill a setInterval loop through an Onclick button

Javascript ID重新分配

1 个答案: