1

我不想要任何插件。我有 3 张图像，它们以 2 种不同的方式显示。

在此处输入图像描述

我想在每个中编写 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

3

好吧，您可以将显示的图像设置locationfoto为：

function moveme(me){
    $('.locationfoto').attr('src', me.src);
}
于 2013-04-05T10:10:11.710 回答
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 回答
1

一个不使用 jQuery 的例子。您需要为主照片指定一个 ID：

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

<script>
function moveme(me) {
  document.getElementById('main').src = me.src;
}

</script>
</body>
于 2013-04-05T10:18:04.807 回答