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

最新推荐文章于 2023-07-06 16:13:11 发布

king-w

最新推荐文章于 2023-07-06 16:13:11 发布

阅读量550

点赞数

文章标签：京东天猫 javascript 图片切换

本文链接：https://blog.csdn.net/qq_33401924/article/details/52199496

版权

众所周知，无论是京东还是天猫，在查看商品时都会有大小图切换的效果。
如下图：
这里写图片描述

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

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