您的位置:首页 > Web前端 > JavaScript

js中利用立即执行函数实现京东大小图切换

2016-08-13 15:16 561 查看
众所周知,无论是京东还是天猫,在查看商品时都会有大小图切换的效果。

如下图:



很多人会写一堆代码来实现这个效果,其实利用立即执行函数,很简单就实现了。

<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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: