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

Posted 2023-02-25

【中文标题】如何为图片库添加上一个和下一个箭头？

【英文标题】：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 )"   />
<img src="userfiles/images/photo2.jpg" class="image2" onclick="loadImage( 2 )"   />
<img src="userfiles/images/photo3.jpg" class="image3" onclick="loadImage( 3 )"   />
</div>

图片：

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

而onClick事件的JS是：

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

</script>

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

【问题讨论】：

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

【参考方案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>