<style> a{display: inline-block;} div img{width: 300px;height: 250px;} </style>
<a href="images/1.jpg" title="我是第一张图片哈哈!!!"><img src="images/1.jpg" ></a> <a href="images/2.jpg" title="我是第二张图片哈哈!!!"><img src="images/2.jpg" ></a> <a href="images/3.jpg" title="我是第三张图片哈哈!!!"><img src="images/3.jpg" ></a> <div class="bigPic" style="border:1px solid #000;width: 300px;"> <img src="" id="test"> </div> <p>选择一个图片</p>
实现方式一:
注意:这种方式产生了闭包问题,所以利用立即执行函数的方式解决了此问题。var a=document.getElementsByTagName('a'); var img=document.getElementById('test'); var p=document.getElementsByTagName('p')[0]; for(var i=0;i<a.length;i++) { (function(j){ a[j].οnmοuseοver=function(){ img.src=a[j].href; p.innerHTML=a[j].title; return false; } })(i); }
实现方式二:
这里没有用数组进行绑定,而是用this关键字,this指向调用者。var a=document.getElementsByTagName('a'); var img=document.getElementById('test'); var p=document.getElementsByTagName('p')[0]; for(var i=0;i<a.length;i++){ a[i].οnmοuseοver=function(){ img.src=this.href; p.innerHTML=this.title; } }