在JS幻灯片中访问图像链接

Question

初学者学习Javascript所以请耐心等待。仅限Javascript。没有JQuery。

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

我似乎无法获取当前图片的链接以打开仅包含该图片的新页面。我尝试使用href链接在每个图像周围添加标签。这在调试器中看起来很好 - ＆gt;元素，但当我将鼠标悬停在图像上时，幻灯片停止（按要求），但它总是链接到最后一个图像链接而不是当前。

我首先尝试使用getAttribute（“href”）然后使用img标记的parentNode属性。两个都没有工作（只返回最后一个图像的href ?? !!）。我想知道如何访问它并确保除当前图像周围的标签以外的所有标签都隐藏或不活动？我尝试的另一个选项是为图像（和元素）创建新的Div元素，但这也不起作用。

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

Answer 1

将z-index:100添加到#container img.show, a.show规则中，以便可见项位于另一个的顶部，其链接将是获得点击的链接。

Answer 2

z-index属性指定元素的堆栈顺序。 堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。

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

现在make使当前元素在堆栈顶部。使用下面的脚本

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