Javascript-如何选择从数组加载的图像

因此，我有四个图像，我从一个使用循环的数组放在页面上。现在我在页面上有四个图像，但我正在寻找一种方法，允许用户单击任何图像并显示他们单击的图像的大版本。我在考虑使用一个新的空数组，使用push？存储单击的图像，但我不知道如何单击图像，因为我没有使用img标记并加载单击的图像

您可以将onClick事件添加到映像节点

选择图像逻辑由onClick函数处理。在我的示例中，SelecteImage变量存储选定的url

见工作示例：

常量图像=[ 1.jpg， 2.jpg， 3.jpg， 4.jpg， ]; 让selectedImage=null； const result=document.getElementById'result'； const container=document.getElementById'container'； const onClick=函数{ 选择edimage=this['data-url']；//或this.src //仅用于在html中显示输出 result.innerText=选择图像； }; //关于Init 对于let i=0；i<图像长度；i++{ const fmg=document.createElement'img'； fmg.setattributesc，图像[i]； fmg.setAttributeclass，FMS； fmg.setAttributealt，图像[i]； fmg.onclick=onclick； fmg['data-url']=图像[i]； 集装箱.fmg； } .fmss{边框：2px纯黑色；边距：10px；} .result{margin:20px；} 点击我

---

不需要阵列。只需将大图片的src设置为单击图片的src

让main=document.getElementByIdmain；//获取对主图像的引用 //在缩略图容器上设置单击事件处理程序 document.addEventListener单击，函数事件{ //检查单击的元素是否为缩略图 ifevent.target.classList.containsthumb{ main.src=event.target.src；//将主图片设置为与缩略图匹配 } }; .thumb{宽度：40px；} 主{宽度：125px；}

---

您需要定义select。有很多方法可以满足你的需求，但在性能/搜索引擎优化方面，正确的方法却很少……我的意思是点击image@vsync即使效率最低也可以。我是JavaScription新手我不知道如何点击图片，这是什么意思？我想我没有得到你的用例。您有一个充满图像的数组，从中可以生成要显示在页面上的项目图像。现在，您需要在特定图像上触发单击事件，以加载并以全尺寸显示该图像。对吗？您是想每x秒切换一次图像，还是应该是静态的？听起来像是一个常见的图像滑块。你是在问如何允许用户点击任何一个图像并显示他们点击的图像的大版本吗？因为我没有使用img标记——不过你是在用JS创建img元素。这些元素可以接收click events.Upvote，我为这个好例子投票。一句简短的评论：当你在其他地方使用let时，为什么你在for循环中使用var？我知道var和let的区别，只是看不出在这方面使用var的原因-为了保持一致，我想let会更好-我知道这是微观逻辑的。@asatter我刚刚复制了代码：让我来修复它：

var arrayarray= [
  "1.jpg",
  "2.jpg",
  "3.jpg",
  "4.jpg"
]; 
var clicked =[];
function asdasd (){
   for (var i = 0, j = arrayarray.length; i < j; i++) {
     var fmg = document.createElement('img');
       fmg.setAttribute("src", arrayarray[i]);
       fmg.setAttribute("class", "fmss");
       container.appendChild(fwfw);
       if (??){
         clicked.push(i);
       }
    }
}