原生js实现淘宝图片切换

Posted 2020-10-13 轻笑苍穹

这个淘宝图片切换具体效果就是：鼠标移上底部一行中的小图片，上面大图片区域就会显示对应的图片。

gif图片看起来还挺酷的，其实实现很简单，用原生js绑定事件改变大图片区域的src。

上代码，html部分的代码：

 1 <div class="picture-big"><img src="img/02big.jpg" width="360" height="360" id="pic" /></div>
 2     <div class="picture-small">
 3         <ul>
 4             <li id="li01"><img src="img/01.jpg" width="70" height="70" /></li>
 5             <li id="li02"><img src="img/02.jpg" width="70" height="70" /></li>
 6             <li id="li03"><img src="img/03.jpg" width="70" height="70" /></li>
 7             <li id="li04"><img src="img/04.jpg" width="70" height="70" /></li>
 8             <li id="li05"><img src="img/05.jpg" width="70" height="70" /></li>
 9         </ul>
10     </div>

javascript部分的代码：

<script type="text/javascript">

function show(canshu1,canshu2){    
    var li01 = document.getElementById(canshu1)  //参数1为小图片的id,参数2为大图片的src
    var pic = document.getElementById(\'pic\')    // pic为大图片div的id
    
    li01.onmouseover = function(){
        pic.src = canshu2                        // 把参数2设为新的src(路径)
    }
}    

show("li01","img/01big.jpg")    //调用show()，用所有大小图片参数
show("li02","img/02big.jpg")    
show("li03","img/03big.jpg")    
show("li04","img/04big.jpg")    
show("li05","img/05big.jpg")    
    

</script>

简单粗暴，就这么几行原生js写的show()，实现这样的图片切换。