缩略图图像交换在莫斯莫夫上

Question

我很想拥有一个带有多个缩略图的画廊网站，其中包括3张图像，这些图像在我对每个缩略图莫斯莫夫时就会旋转。

我在@matthias_h的另一个线程中发现了这个令人惊叹的响应式小提琴，而在缩略图盒上进行了多个缩略图图像。

： http:

他的小提琴

<article>
<figure data-image-list="http://dummyimage.com/200x200/000000/cccccc.png&text=img1,http://dummyimage.com/200x200/dedede/cccccc.png&text=img2,http://dummyimage.com/200x200/b31031/cccccc.png&text=img3">
    <img class="imageHolder" data-src="http://dummyimage.com/200x200/cdcdcd/dddddd.png&text=+" src="http://dummyimage.com/200x200/cdcdcd/dddddd.png&text=+" />
</figure>

http：//jsfiddle.net/matthias_h/matthias_h/2f2tth47/2f2tth47/

$(".imageHolder").mousemove(function (event) {
var xPos = event.pageX,
    imgPos = $(".imageHolder").offset().left,
    imgWidth = $(".imageHolder").width();
console.log("xPos: ", xPos, ", imgPos: ", imgPos, ", imgWidth: ", imgWidth);
var change1 = imgPos,
    change2 = imgPos + imgWidth / 3,
    change3 = imgPos + 2 * imgWidth / 3;
console.log("change1: ", change1, "change2: ", change2, "change3: ", change3);
$images = $("figure").data("imageList");

var array = $images.split(',');
if (xPos > change1) {
    $("img").attr("src", array[0]);
}
if (xPos > change2) {
    $("img").attr("src", array[1]);
}
if (xPos > change3) {
    $("img").attr("src", array[2]);

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

/ 这是两个问题。

1. 复制它时，在任何一个上移动都会切换 在其他图像上。
2. 它采用单个图像而不是通过CSS的BG位置，这是效率较低的，因为我个人在所有工作中都使用图像精灵。

我在HTML/CSS方面有很好的经验，但没有JavaScript的经验。很想获得一些见识，我如何解决这两个问题。主要是第一个制作带有多个图像的画廊的图库。

提前致谢！

Answer 1

现在您重复了这些元素，它是针对集合而不是一个元素的目标。

通常，jQuery方法的 setter 适用于所有匹配元素， getter 返回第一个匹配元素的值。

问题1：
使用
$（this）而不是$（“ img”）
$（this）而不是$（“。imageHolder”）
$（this）.parent（“ figig”）而不是$（“ Figie”）

问题＃2：
您将必须使用.css（）来更改背景位置而不是更改HREF。
那将是$（this）.css（{background-position：newPosition}）其中newposition必须定义...

codepen