0

我有一个包含大约 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>

单击时如何获取箭头以加载真实图像？

4

1 回答 1

0

使用您的代码，将其改造成它有点困难，实现您需要的最快方法是存储一个全局变量。然后按如下方式运行函数。但我建议您使用 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>
于 2013-05-07T15:20:41.590 回答