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