循环一次图像并获取每次鼠标单击的鼠标坐标

Question

我有以下脚本。我需要在图像循环结束时获取发送到我的电子邮件的每个鼠标单击坐标的坐标。有人可以帮我吗？我是这方面的新手，正在尝试在线执行一些记忆任务。任何帮助将不胜感激。

这是我的脚本：

<head>
    <title>Practice2</title>
    <link type="text/css" rel="Stylesheet" href="MemStyle.CSS">
    <script type = "text/javascript">        
       var x=0;
       function changeImage() 
       {
if (x == images.length){
return;      
}

          document.getElementById("img").src=images[x]
          x++;
       }


      var images =  ["S2b.jpg", "S3b.jpg", "S4b.jpg", "S5b.jpg", "S1b.jpg"];       

    </script>
</head>
<body>
    <div id="MemImg">
       <button onclick="changeImage()" >
           <img id="img"  width="700px" height="700px" >
       </button>   
     </div>
</body>

Answer 1

试试这个：

var x = 1;
function changeImage() 
{
    if (x > images.length)
    {
        return;
    }

    document.getElementById("img").src = images[x];
    x++;
}

顺便说一句，@tadman 的建议很好：

var images = ["S2b.jpg", "S3b.jpg", "S4b.jpg", "S5b.jpg", "S1b.jpg"];

然后将您的 x 声明更改为：

var x = 0;

以及条件：

if (x == images.length)

正如@Shaiful Islam 所建议的，您可以通过将 return; 更改为 x = 0 来重置计数器。

循环一次图像并获取每次鼠标单击的鼠标坐标

Looping through images once and getting mouse coordinates of each mouse click

javascript

loops