简单的逻辑 - JavaScript涉及

我不想要任何插件。我有3种图像以两种不同的方式显示。简单的逻辑 - JavaScript涉及

enter image description here

我想写的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? 
}

得到任何帮助。

来源

2013-04-05 doniyor

那么，你可以设置为locationfoto显示的图像：

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

来源

2013-04-05 10:10:11 techfoobar

多数民众赞成它！非常干净的代码。像魅力一样工作。谢谢:) – doniyor 2013-04-05 10:15:35

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

来源

2013-04-05 10:12:46 alwaysLearn

@techfoobar哦，我的坏..谢谢你发现 – alwaysLearn 2013-04-05 10:19:17

<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-05 10:12:55 John

我的例子不是在闪光灯创建，但感谢您的时间 – doniyor 2013-04-05 10:13:32

一个没有使用jQuery的例子。您需要指定主照片的编号：

<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-05 10:18:04

简单的逻辑 - JavaScript涉及

回答

相关问题