我正在努力教自己如何编码（特别是网站）。我对html和css有很好的了解，而且我正在学习js。但知道我需要社区的帮助才能取得进步！
我想知道如何在每次鼠标移动中多次（按顺序）实现更改图像源的效果？例如：http://next2nothi.ng/
经过几次搜索，我无法找到实现这一目标的良好解决方案......
在此先感谢您的帮助！
尝试
let list=[...Array(20)].map((x,i)=>`https://picsum.photos/150/150?image=${i}`);
let index=0;
document.addEventListener("mousemove", function(){
document.getElementById("myImg").src = list[ ++index % list.length];
});<img id="myImg" width="150px" heigh="150px" >这是一个简单的例子。因此，当您在特定div上触发鼠标移动事件时，您需要有一个要显示的图像列表，您可以从列表中选择一个随机图像并将其设置为div的背景图像：
function SwapBackgroundImage(){
var listOfImages = ['urlToimage1','urlToImage2', 'and etc']; // so have your array
$('#myDiv').on('mousemove',function(){
// i am picking the first image here, but you can google how to pick a random element in an array and use that
$(this).css('background-image', 'url(' + listOfImages[0]+ ')');
});
}
<div id="myDiv"></div>
而已。
你好Ted_M你不需要使用jQuery，它非常简单，你可以通过几行代码接收它，即声明一个函数，它将检查鼠标是否移动。
var myListener = function () {
document.removeEventListener('mousemove', myListener, false);
// do stuff
document.getElementById("imageid").src="../template/save.png";
};
document.addEventListener('mousemove', myListener, false);
现在您需要更改图像网址
document.getElementById("imageid").src="../template/save.png";
所以现在方法将是
var myListener = function () {
document.removeEventListener('mousemove', myListener, false);
// do stuff
document.getElementById("imageid").src="../template/save.png";
};
document.addEventListener('mousemove', myListener, false);
就是这样，如果要与您提供的链接相同，则必须将图像URL存储在数组中。谢谢你评论任何帮助。
let listImageURL = ['urlToImg1.png','urlToImg2.png','..3.png', ... till how much you need];
let body = document.querySelector('body').addEventListener('mouseover',function(event){
// take list of images
for(let i = 0; i<=listImageURL.length-1;i++){
event.target.style.background = `url(${listImageURL[i]})`;
}
});
HTML:
<body>
</body>