1

このためのプラグインは必要ありません。2 つの異なる方法で表示される 3 つの画像があります。

ここに画像の説明を入力

それぞれに onclick 関数を書きたいimgので、小さなものをクリックすると大きなものを置き換える必要があります。私のビジョンはこれです：

<img class="locationfoto" src="image-path">  <--- main foto 
<img class="locationfoto1" src="image-path-1" onclick="moveme(this)">
<img class="locationfoto2" src="image-path-2" onclick="moveme(this)">

私のjs：

function moveme(me){
   // how can i do this?
}

どんな助けにも感謝します。

4

4 に答える 4

2 
function moveme(me)
{
   var imgsrc = me.src ;
   $('.locationfoto').attr('src', imgsrc)
}
于 2013-04-05T10:12:46.343 に答える
1 
<style>
 table#thumbnails{
  background-color:white;
}
 table#thumbnails tr td img
{
cursor: pointer;
 }
</style>

<script type="text/javascript">
 function showImage(image){
var mainImage = document.getElementById('mainImage');
mainImage.src = image; 
}
function toggleThumbnails(){
var thumbnails = document.getElementById('thumbnails');
if(thumbnails.style.display == 'block'){
thumbnails.style.display = 'none'; 
 } else {
thumbnails.style.display = 'block'; 
}
}


<input type="button" value="Show/hide thumbnail list" onclick="toggleThumbnails()" />
<table id="thumbnails" style="display:none;">
<tr>
<td><img src="thumb1.png" title="Item 1" onclick="showImage('img1.png')" /></td>
<td><img src="thumb2.png" title="Item 2" onclick="showImage('img2.png')" /></td>
<td><img src="thumb3.png" title="Item 3" onclick="showImage('img3.png')" /></td>
</tr>
<tr>
<td><img src="thumb4.png" title="Item 4" onclick="showImage('img4.png')" /></td>
<td><img src="thumb5.png" title="Item 5" onclick="showImage('img5.png')" /></td>
<td><img src="thumb6.png" title="Item 6" onclick="showImage('img6.png')" /></td>
</tr>
<tr>
<td><img src="thumb7.png" title="Item 7" onclick="showImage('img7.png')" /></td>
<td><img src="thumb8.png" title="Item 8" onclick="showImage('img8.png')" /></td>
<td><img src="thumb9.png" title="Item 9" onclick="showImage('img9.png')" /></td>
</tr>
</table>
<div>
<img id="mainImage" src="img1.png" /> 
</div>

あなたが参照している例は Flash で作成されているため、JavaScript で同様の派手なルック アンド フィールを実現するのは簡単ではありません。

しかし、javascript で同様の機能を実現するのは非常に簡単ですが、洗練されたスムーズなトランジションやツールチップの洗練された外観などでは実現できません (可能ですが、さらに多くの作業が必要です...)。サムネイルをクリックして画像を表示する簡単な例は、次のようになります。

于 2013-04-05T10:12:55.863 に答える