Javascript 在mousemove上交换多个图像

我想做的是在mousemove上从左到右显示产品和其他版本的图像。下面是一个简单的html示例：

    <article>
      <figure data-imageList="image2.jpg,image3.jpg,image4.jpg">
        <img data-src="main-image.jpg" src="main-image.jpg">
      </figure>
    </article>

正如您在html中看到的，图像src将从数据图像列表中更改。当用户从文章中移出鼠标时，main-image.jpg将再次出现。这将成为默认图像。当用户仅在当前文章上从左向右移动鼠标时，应触发该函数。其他列表项不应受到鼠标移动的影响。也许，我应该创建一个唯一的id，或者使用“每个函数”来实现。反正我也解决不了那个问题

有人能帮我解决那个问题吗。我真的不擅长javascript

---

谢谢大家!

您可以使用

div

并在其中放置和

img

控件。现在使用

onmouseover

和

e.PageX

查找

宽度的变化

和

div的
宽度
，然后使用
if-else
更改
img的
src
属性。最后使用
onmouseleave
将
img
的
src
更改为默认值


var-prevX=0；
$（'div'）.mousemove（函数（e）{
var direc=（prevX>=e.pageX？“左”：“右”）；
如果（direc==“右”）{
如果（如pageX>100）{
$（“#img”）.attr（“src”http://dummyimage.com/200x300/000/fff.png&text=Image+2");
}
其他的
{
$（“#img”）.attr（“src”http://dummyimage.com/200x300/000/fff.png&text=Image+3");
}
}
prevX=e.pageX；
});
$（'div'）.mouseleave（函数（）{
$（“#img”）.attr（“src”http://dummyimage.com/200x300/000/fff.png&text=Image+1");
});
div
{
高度：300px；
宽度：200px；
边框：1px纯红；
}

刚刚使用一些虚拟图像作为数据属性和以下jQuery创建了一个jQuery：

    $("img").mousemove(function (event) {
    var xPos = event.pageX;
    $images = $("figure").data("imageList");
    var array = $images.split(',');
    if (xPos > 40) {
        $("img").attr("src", array[0]);
    }
    if (xPos > 65) {
        $("img").attr("src", array[1]);
    }
    if (xPos > 85) {
        $("img").attr("src", array[2]);
    }

});
$("img").mouseout(function () {
    $("img").attr("src", $("img").data("src"));
});

用于演示的只是一些小图片。可以根据图像交换时的实际图像大小正确计算，但对于演示，只需硬编码值

供参考：

更新：根据进一步要求，响应性测试的示例相同：

CSS:

figure {
    width:100%;
    max-width:200px;
}
img {
    position:relative;
    width:100%;
}

我还向图像中添加了class
imageHolder
（不是必需的，但用于处理类而不是仅应用于元素），并将控制台日志消息保留在小提琴中，以便更容易检查计算的宽度和位置。

在所提供的示例中，另一个小的调整是将数据属性的名称从
数据图像列表更改为
数据图像列表
，也就是仅用于该名称。原因是命名约定，每个连字符的
data-
属性将被检索，减去连字符和camelcased（连字符后的第一个字母），因此数据图像列表将被检索为$.data（“imageList”）。此处的其他参考资料：

如果已使用的数据属性的名称已使用大小写，则它可以以小写形式检索：
data imageList=“value1，value2，value3”
->
$.data（“imageList”）
。尽管在jQuery api中没有提到，但这里的描述例如：
这里是一个我真正想要的示例站点（在产品图像上滚动），只需在这里添加此示例，以避免在我的答案下面出现太多注释-您可以将$images=$（“figure”）.data（“imageList”）更改为$（“figure”）.data（“imageList”）如果您的live站点上已经有太多名为data imageList的数据属性；使用$.data（）进行检索将使属性的名称小写。虽然jQueryAPI中没有提到它，但这里已经提到了：（简短地说：camelcased属性名不可检索是一个bug，但它们已经修复了它）。已经测试过你的原始属性名，小写就可以了。你能在你的问题中粘贴带有数据属性和jquery数据查询的图，或者提供一个到相关站点的链接吗？刚刚收到了自动通知，避免了太多的评论和聊天建议，但可能这只是一个小问题，因为小提琴正在工作，用两句话就解决了。这个页面的html被破坏，源代码停在该url的第238行是可以的，但是没有类imageHolder，所以脚本无法工作。这里也收到了一个通知，将其移动到聊天中，因为评论太多了。可以吗？如果修好的话，估计只需要几分钟。这很酷，但是设计很灵敏。因此，图像宽度随分辨率而变化。你能给我看一个有响应的图像吗？@MegAnn很高兴你喜欢它，因为我正要增大图像的大小（我刚刚注意到在mousemove上更改img只有在鼠标移动非常慢的情况下才可见）。重新响应-不应该是太大的问题，因为可以获得img容器的实际img宽度/宽度，并相应地设置更改img的步骤。将在几分钟内添加第二把小提琴。@MegAnn刚刚用第二把小提琴更新了答案，以响应示例。这太棒了！不过我有个小问题。当我把鼠标放在我的现场设计上时，它不起作用。这是我得到的错误消息；“UncaughtTypeError:无法读取未定义的属性'split'”消息的详细信息是：（匿名函数）（索引）：278m.event.dispatch jquery.js:3r。handle@MegAnn也许这只与你的live站点和我在1分钟前的小回答中提到的数据属性重命名有关。我重命名了您的数据属性，所以如果您只是应用了我的示例，就不会得到它的值。有可能吗。。？
figure {
    width:100%;
    max-width:200px;
}
img {
    position:relative;
    width:100%;
}