Javascript 如何在mousemove上随机更改图像源？

当用户在div中移动鼠标约100px时，我尝试随机更改图像的源。我只想更新源，而不是将图像堆叠在一起，或将其设置为显示：块或显示：无等

加载网站后，请确保单击以查看示例

到目前为止，我有下面的HTML

<div class="header-image-inner">
    <img src="img/image-01.png" alt="" />
</div>

$(".header-image-inner").mousemove(function (event) {
    $(".header-image-inner img").attr('src', 'image-02.png');
    $(".header-image-inner img").attr('src', 'image-03.png');
    $(".header-image-inner img").attr('src', 'image-04.png');
});

$（“.header-image-inner”）.mousemove（函数（事件）{
$（“.header-image-internal-img”）.attr（'src'，'image-02.png'）；
$（“.header-image-internal-img”）.attr（'src'，'image-03.png'）；
$（“.header-image-internal-img”）.attr（'src'，'image-04.png'）；
});

我已经做了一个工作演示。

HTML

---

代码是不言自明的。我希望这能有所帮助。

表示这确实是一个问题的问号在哪里？可以看一看

事件。target

，特别是它的

src

属性…我添加了一个How do和其中一个“？”是否有帮助这只是一个很小的暗示，表明你的问题缺少一个特定的问题，没有包括研究工作，因此太广泛了。这可能是惊人的重复！非常感谢你的帮助。我无法编写此代码，但看着它，我可以看到它是如何工作的，等等。谢谢：）

<div class="header-image-inner">
    <img src="https://images.unsplash.com/photo-1492799808351-30d7d3955cac?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=74696345f3ca20d8a46bf6d692b78c53&auto=format&fit=crop&w=500&q=60" alt="" />
</div>

$(document).ready(function(){
    var images = [
        "https://images.unsplash.com/photo-1518127864129-8d0834d765bc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5acdfad29e7fef07a86e6174e3b1d73c&auto=format&fit=crop&w=500&q=60",
        "https://images.unsplash.com/photo-1518065336951-d16c043900d6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=05f800ba4e6c18a40a8f7cf12cdd2c35&auto=format&fit=crop&w=500&q=60",
        "https://images.unsplash.com/photo-1492799808351-30d7d3955cac?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=74696345f3ca20d8a46bf6d692b78c53&auto=format&fit=crop&w=500&q=60"
    ];
    var currentX = 0, currentY = 0;
    $('.header-image-inner').mousemove(function(e){
        if(Math.abs(currentX-e.pageX) > 50 || Math.abs(currentY-e.pageY) > 50){
            currentX = e.pageX;
            currentY = e.pageY;
            $('.header-image-inner img').attr('src',images[Math.floor(Math.random()*images.length)]);
        }
    })
})