Question

我针对鼠标单击显示一个图像显示的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>

如何在jquery中单击鼠标逐个显示多个图像

1 个答案: