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

【问题标题】：How to add previous and next arrows for image gallery ?如何为图片库添加上一个和下一个箭头？
【发布时间】：2013-05-07 14:41:37
【问题描述】：

我有一个包含大约 30 张带有缩略图条的照片的图片库。由于图像的加载时间较长，我添加了一个 on .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事件的JS是：

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

点击时如何让箭头加载真实图像？

【问题讨论】：

上一个和下一个按钮的JS在哪里？

标签： javascript image onclick gallery

【解决方案1】：

使用您的代码，将其改造成它有点困难，实现您需要的最快方法是存储一个全局变量。然后运行如下函数。但我建议你使用 javascript 和 jquery 来研究 oop，因为下面的解决方案远未完成而且有点混乱，因为它将变量放入文档范围

<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>

【讨论】：