如何爲圖庫添加上一個和下一個箭頭？

Question

我有一個約30張照片與縮略圖帶的圖片庫。 由於我在.click（）事件中添加了一個很大的加載時間，因此只有當您單擊縮略圖時才加載圖像。 我這樣做的方式是通過添加一個小的1x1 dummy.jpg來加載，而不是現在僅在單擊縮略圖時加載的實際圖像。 問題是我也有箭頭爲下一個和以前的圖像不再工作了，因爲他們加載dummy.jpg而不是真正的.jpg圖像。

這是代碼我有：

對於箭頭：

<div class="nav-icons"> 
<a href="#" class="prev_image" title="Previous Image"></a> 
<a href="#" class="next_image" title="Next Image"></a> 
</div> 

用於縮略圖條：

<div id="slider"> 
<img src="userfiles/images/photo1.jpg" class="image1" onclick="loadImage(1)" width="185" height="123" /> 
<img src="userfiles/images/photo2.jpg" class="image2" onclick="loadImage(2)" width="185" height="123" /> 
<img src="userfiles/images/photo3.jpg" class="image3" onclick="loadImage(3)" width="189" height="123" /> 
</div> 

對於圖像：

<div id="fotoblock"> 
<img src="dummy.jpg" id="image1" width="1920" height="1075" /> 
<img src="dummy.jpg" id="image2" width="1920" height="1075" /> 
<img src="dummy.jpg" id="image3" width="1920" height="1075" /> 
</div> 

而onClick事件i的JS s：

<script language="javascript"> 
function loadImage(id) { 
var image = document.getElementById('image'+id); 
image.setAttribute('src', 'userfiles/photo'+id+'.jpg'); 
} 
</script> 

我怎樣才能讓箭頭加載點擊時的真實圖像？

Answer 1

隨着代碼的改進，有點難以對其進行改進，實現你所需要的最快方法就是存儲一個全局變量。然後我運行下面的函數。但是我建議你用javascript來查看oop，而jquery會讓這個變得非常簡單，因爲這個變暗的波紋管遠非完整且有點混亂，因爲它會將變量放入文檔範圍

<div class="nav-icons"> 
<a href="#" class="prev_image" title="Previous Image" onclick="moveImage('left')"></a> 
<a href="#" class="next_image" title="Next Image" onclick="moveImage('right')"></a> 
</div> 

<script> 
var current = 1; 
function moveImage(direction){ 
    if(direction == "left"){ 
     loadImage(current - 1); 
    }else{ 
    loadImage(current + 1); 
    } 
} 

function loadImage(id) { 
var image = document.getElementById('image'+id); 
image.setAttribute('src', 'userfiles/photo'+id+'.jpg'); 
current = id; 
} 
</script>