Question

我正在制作一个弹出图像滑块，当单击该图像的缩略图时，弹出窗口将显示同一图像。我需要找到一种方法来获取“ imgArr”中单击的图像的索引，然后从该当前索引开始幻灯片。我的代码使滑块从单击的当前图像回到索引1，然后再回到2，依此类推...无论我单击什么图像，它始终从索引0开始

其他信息：我的imgArr变量根据其当前位于哪个页面上来更改其数组。因此还有3个其他变量包含不同类型的图像，但是这些变量已更新为imgArr，因此javascript可以决定在何处发布图像。

codepen

 let imgArr;
 var current = 0;

 rightArrow.addEventListener('click', slideRight);

 function slideRight(){
   popImg.setAttribute('src', imgArr[current + 1]);
   current++;
   if(current > imgArr.length){
     current = 0;
   }
 }

Answer 1

据我了解，您有一个图像数组，并且希望返回单击的图像索引。

不幸的是，我现在不在家测试这个东西，但我相信它应该可以满足您的需求。

var images = document.getElementsByTagName('img');
for(var i = 0; i < images.length; i++) {
    images[i].onclick = function (img) {
        var index = imgArr.findIndex(image => image === img.src);
        console.log(index + ' clicked.');
    }
}

javascript：获取存储在图像数组中的点击的图像索引

1 个答案: