jqueryのマウスクリックに関して複数の画像を1つずつ表示する方法

Question

マウスのクリックに対して1つの画像表示のjqueryコードを書き、その画像を時間遅延で別の画像に置き換えます。以下のコードが添付されています

<div> 
     <script> 
      document.onclick = userClicked; 
      function userClicked() { 
       var x = event.clientX; 
       var y = event.clientY; 
       var snowball = document.getElementById("snowballAppear"); 
       snowball.style.display = ''; 
       snowball.style.position = 'relative'; 
       snowball.style.left = x; 
       snowball.style.top = y; 
       setTimeout(function() { 
        document.getElementById("snowballAppear").setAttribute("src", "d2.png"); 
       }, 5000); 
      } 
     </script> 
     <img id="snowballAppear" style="display: none;margin-left: -800px;margin-top: -30px;" src="bul.png"/> 

    </div> 

このコードをjqueryの連続したマウスクリックに関する複数の画像で置き換えたいと思います。

Answer 1

あなたが欲しいものを理解するのは難しいです。これはどう？

$(document).ready(function() { 
 
    imgs = [ 
 
     'https://via.placeholder.com/350x150/asdfes', 
 
     'https://via.placeholder.com/350x150/gsedes', 
 
     'https://via.placeholder.com/350x150/hrdhrc', 
 
     'https://via.placeholder.com/350x150/hrdrbs', 
 
     'https://via.placeholder.com/350x150/grrcbr', 
 
     'https://via.placeholder.com/350x150/dfgrbrd' /*...more images*/ 
 
    ]; 
 
    var i = 0; 
 
    
 
    $(document).click(function(e) { 
 
    var x = event.clientX, 
 
     y = event.clientY; 
 
    $('#snowballAppear').css({ 
 
     display: '', 
 
     position: 'absolute', 
 
     top: x, 
 
     left: y 
 
    }); 
 

 
    setTimeout(function() { 
 
    console.log('hi'); 
 
     $('#snowballAppear').attr('src', imgs[i]); 
 
     i = i === imgs.length ? 0 : i + 1; 
 
    }, 5000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <img id="snowballAppear" style="display: none;" src="https://via.placeholder.com/350x150/adfsfes" /> 
 

 
</div>