2

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

这是加载幻灯片的代码，当单击图像时会打开灯箱。（幻灯片的图像由 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

问候科恩。

4

1 回答 1

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

于 2012-04-10T18:13:30.953 回答