这个淘宝图片切换具体效果就是：鼠标移上底部一行中的小图片，上面大图片区域就会显示对应的图片。
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()，实现这样的图片切换。
原生js实现淘宝图片切换
原文地址：http://www.cnblogs.com/0dhw/p/7804539.html