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

关心Koen。

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

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

1 个答案: