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事件的JS是：

<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会使这个变得非常简单，因为它将变量放入文档范围，因为sollution还远没有完整而且有点混乱

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

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

1 个答案: