正文
原生js实现淘宝图片切换
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
这个淘宝图片切换具体效果就是：鼠标移上底部一行中的小图片，上面大图片区域就会显示对应的图片。
gif图片看起来还挺酷的，其实实现很简单，用原生js绑定事件改变大图片区域的src。
上代码，html部分的代码：
<div class="picture-big"><img src="img/02big.jpg" width="360" height="360" id="pic" /></div>
<div class="picture-small">
<ul>
<li id="li01"><img src="img/01.jpg" width="70" height="70" /></li>
<li id="li02"><img src="img/02.jpg" width="70" height="70" /></li>
<li id="li03"><img src="img/03.jpg" width="70" height="70" /></li>
<li id="li04"><img src="img/04.jpg" width="70" height="70" /></li>
<li id="li05"><img src="img/05.jpg" width="70" height="70" /></li>
</ul>
</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()，实现这样的图片切换。
