如何實現這個簡單的jQuery圖像庫？

我試圖做一個簡單的jQuery畫廊只有3張圖片如下圖所示。如何實現這個簡單的jQuery圖像庫？

enter image description here

我把它翻譯是這樣的：

if thumb clicked -> this thumb -> become big 
current big -> become thumb

的問題是，我不知道怎麼就是這樣，我把它翻譯似乎是正確的？

謝謝

來源

2012-10-14 onimojo

+1涼爽的圖形 – StaticVariable

請試試這個：

<html> 
<head> 
    <title>Simple Gallery</title> 
<script src="jquery.js"></script> 
<script> 
    function ChangeThis(getThumb) 
    { 
     for(var i=1;i<=3;i++) 
     { 
      if(getThumb == i) 
      { 
       $("#bigView").html("<img src='img"+i+"' />"); 
       $("#thumb"+i).hide(); 
      } 
      else 
      { 
       $("#thumb"+i).show(); 
      } 
     } 
    } 
</script> 
<style> 
#bigView{width:100px;height:100px;} 
.thumb{width:30px;height:30px} 
</style> 
</head> 
<body> 

<table><tr><td colspan="3"> 
<div id="bigView"><img src='img1'></div> 
</td></tr> 
<tr> 
<td><div id="thumb1" class="thumb" onclick="ChangeThis(1);" style="display:none;"><img src='img1' /></div></td> 
<td><div id="thumb2" class="thumb" onclick="ChangeThis(2);"><img src='img2' /></div></td> 
<td><div id="thumb3" class="thumb" onclick="ChangeThis(3);"><img src='img3' /></div></td> 
</tr> 
</table>

來源

2012-10-14 15:20:15

偉大的作品！謝謝！ :) – onimojo

如何實現這個簡單的jQuery圖像庫？

回答

相關問題