簡單的邏輯 - 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涉及

回答

相關問題