从幻灯片中的图像中获取图像 src

Question

我今天一直在四处寻找，花了几个小时试图完成一些事情。对于客户，我在单击图像时创建带有灯箱的幻灯片。幻灯片和灯箱都可以工作，但我还没有在灯箱中得到正确的图像。

这是加载幻灯片的代码，当单击图像时会打开灯箱。 （幻灯片的图像由 php 脚本加载并转换为 Javascript 数组）

<script type="text/javascript">

var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/"+galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}

window.onload = function(){
setInterval("rotateimages()", 1000);
}
</script>
<div style="width: 170px; height: 160px">
<a href = "javascript:void(0)" onclick =          "document.getElementById('light').style.display='block';document.getElementById('fade').style.    display='block'">
<img id="slideshow" src="" />
</a>
<div id="light" class="white_content">
<img id="lightImg" src="" />
<script>
var image = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", image);
</script>

我现在尝试创建一个名为“image”的变量，并让它包含幻灯片中当前图像的 src。所以我可以将它加载到灯箱中的图像中。

希望有人能给我一些有用的提示。我是 Javascript 语言的新手。

幻灯片的脚本来自：http://www.javascriptkit.com/javatutors/externalphp2.shtml

问候科恩。

Answer 1

现在真的没有借口使用突兀的 Javascript（HTML 属性中的东西，理想情况下应该在外部文件中。http://en.wikipedia.org/wiki/Unobtrusive_JavaScript）。

我帮您清理了一些代码，并在您似乎出错的地方进行了更改。正如 DotNetter 已经指出的那样，在这种情况下使用 jQuery 是明智的，因为它确实简化了事情。但是，我将假设出于某种原因您想要在纯 js 中使用它。以下是您发布的经过正确更改的代码的简化。

<style type="text/css">
    .wrapper {
        width: 170px;
        height: 160px;
    }
</style>

<script type="text/javascript">
    var curimg=0;
    function rotateimages(){
        document.getElementById("slideshow").setAttribute("src", "images/" + galleryarray[curimg]);
        curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
    }

    window.onload = function(){
        setInterval("rotateimages()", 1000);

        document.getElementById("slideshow").onclick = function () {
            var imageSrc = document.getElementById("slideshow").src;
            document.getElementById("lightImg").setAttribute("src", imageSrc);
            document.getElementById('light').style.display = 'block';
            document.getElementById('fade').style.display = 'block';
        }
    }
</script>

<div class='wrapper'>
    <img id="slideshow" src="" />
    <div id="light" class="white_content">
        <img id="lightImg" src="" />
    </div>
</div>

之前，你是在页面加载时获取当前图片的src，你需要在用户点击时获取图片的src