众所周知,无论是京东还是天猫,在查看商品时都会有大小图切换的效果。
如下图:
很多人会写一堆代码来实现这个效果,其实利用立即执行函数,很简单就实现了。
<ul>
<li><img src="../../../img/练习/s1.jpg" alt=""></li>
<li><img src="../../../img/练习/s2.jpg" alt=""></li>
<li><img src="../../../img/练习/s3.jpg" alt=""></li>
</ul>
<script>
var img=document.getElementById('show_img');
var lis=document.getElementsByTagName('li');
for (var i=0;i<lis.length;i++){
!function (index) {
lis[index].onmouseover=function () {
img.src='../../../img/练习/b'+(index+1)+'.jpg';
}
}(i);
}
</script>