jquery에서 마우스 클릭과 관련하여 하나씩 여러 이미지를 표시하는 방법

Question

마우스 클릭과 관련하여 하나의 이미지 쇼에 대한 jquery 코드를 작성하고 해당 이미지가 시간 지연으로 다른 이미지로 대체되었습니다. 코드는 내가 여러 이미지가 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> 

아래 첨부.

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>