Question

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

enter image description here

我想在每个img中编写onclick函数，这样当我点击小函数时，它应该替换大的函数。我的愿景是：

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

感谢任何帮助。

Answer 1

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

function moveme(me){
    $('.locationfoto').attr('src', me.src);
}

Answer 2

function moveme(me)
{
   var imgsrc = me.src ;
   $('.locationfoto').attr('src', imgsrc)
}

Answer 3

<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中获得类似的功能非常容易，但是没有花哨的平滑过渡，以及工具提示等的花哨外观（这是可能的，但需要更多......）。从点击缩略图显示图像的简单示例可能是这样的：

Answer 4

不使用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>

简单的逻辑 - 涉及的JavaScript

4 个答案: