日期:2014-05-16  浏览次数:20330 次

JS图片点击后取得链接,把链接传给大图,求代码
大图

<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);


});