在 JS 幻灯片中访问图像 link

Question

初学Javascript所以请耐心等待。仅 Javascript。没有JQuery.

我创建了一个 Javascript 图像幻灯片，它通过更改 img 标签（通过 JS 中的 for 循环单独添加）的 class（不透明度值）淡入和淡出脚本-不是 html).

我似乎无法获取当前图像的 link 来打开只有该图像的新页面。我尝试使用 href links 在每张图片周围添加标签。这在调试器中看起来不错 --> 元素，但是当我将鼠标悬停在图像上时，幻灯片停止（按要求）但它总是 link 一直到最后一张图像 link 而不是当前图像.

我首先尝试使用 getAttribute ("href")，然后是 img 标签的 parentNode 属性。都不起作用（只返回最后一张图片的 href？？！！）。我想知道我如何访问它并确保除了当前图像周围的标签之外的所有标签都隐藏或不活动？我尝试过的另一个选择是为图像（和元素）创建新的 Div 元素，但这也不起作用。

JS Fiddle https://jsfiddle.net/f5yt7rna/

Answer 1

将 z-index:100 添加到 #container img.show, a.show 规则，以便可见项目位于另一个之上，并且它的 link 是将获得点击的项目。

Answer 2

z-index 属性指定元素的堆叠顺序。具有较高堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。

来源：http://www.w3schools.com/cssref/pr_pos_z-index.asp

现在使当前元素位于栈顶。使用下面的脚本

#container img.show, a.show {
opacity:1;
z-index:1000
}

在 JS 幻灯片中访问图像 link

Accessing image link in JS slideshow

javascript

image

href