如何为图库添加上一个和下一个箭头？

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>