大图
<div id="bigimg">
<a href=""><img src="imaegs/1.jpg" width="533" height="800" id="bigimg"/></a>
</div>
小图
<ul id="littleimg">
<li><a href=""><img src="imaegs/1.JPG" width="150" height="150" onclick="img()"/></a></li>
<li><a href=""><img src="imaegs/2.JPG" width="150" height="150" onclick="img()"/></a></li>
<li><a href=""><img src="imaegs/3.JPG" width="150" height="150" onclick="img()"/></a></li>
<li><a href=""><img src="imaegs/4.JPG" width="150" height="150" onclick="img()"/></a></li>
<li><a href=""><img src="imaegs/5.JPG" width="150" height="150" onclick="img()"/></a></li>
</ul>
想实现,在点击小图后,取得这个小图的链接(如imaegs/2.JPG),把这个链接传给大图的src,
就是想实现点击小图大图相应地改变,
------解决方案--------------------
是不是类似于这种效果?
http://qingxinxz.tk/newindex/webwork/imag/
------解决方案--------------------
- JScript code
window.onload = function() { var obj = document.getElementById('littleimg').getElementsByTagName('img'); for (var i = 0; i < obj.length; i ++) { obj[i].onclick = function() { document.getElementById('bigimg').src = this.src; } } }
------解决方案--------------------
jquery方法:
$('#littleimg li a img').click(function(){
var href=$(this).attr('src');
$('#bigimg a img').attr('src',href);
});