從幻燈片中的圖像中獲取圖像src

Question

我一直在環顧四周，花了幾個小時試圖完成某件事。對於客戶端，我在點擊圖片時創建了一個帶有lightbox的幻燈片。幻燈片和燈箱都可以工作，但我在燈箱中沒有找到正確的圖像。

這是加載幻燈片並單擊圖像打開燈箱時的代碼。 （爲幻燈片顯示的圖片是通過一個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> 

我現在嘗試創建一個名爲「圖像」的變量，並讓這個包含當前圖像的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，當用戶點擊