css样式有点问题，但是主要是js逻辑：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 list-style:none; 11 } 12 img{ 13 display: block; 14 } 15 .con{ 16 360px; 17 height:432px; 18 border:1px solid #ccc; 19 margin:100px auto; 20 background:url(img/taobao/01big.jpg) no-repeat; 21 } 22 .con ul{ 23 overflow: hidden; 24 } 25 .con li{ 26 float:left; 27 cursor:pointer; 28 /* 默认就有一个透明的边框 */ 29 border: 1px solid transparent; 30 } 31 .con li:hover, 32 .con li.on{ 33 /* 鼠标移入只是把透明颜色变成了彩色 */ 34 border-color: #900; 35 } 36 </style> 37 </head> 38 39 <body> 40 <div class="con"> 41 <img id="bigImg" src="img/taobao/01big.jpg" alt=""> 42 <ul> 43 <li class="on"><img src="img/taobao/01.jpg" data-src="img/taobao/01big.jpg" width="70" height="70" /></li> 44 <li><img src="img/taobao/02.jpg" data-src="img/taobao/02big.jpg" width="70" height="70" /></li> 45 <li><img src="img/taobao/03.jpg" data-src="img/taobao/03big.jpg" width="70" height="70" /></li> 46 <li><img src="img/taobao/04.jpg" data-src="img/taobao/04big.jpg" width="70" height="70" /></li> 47 <li><img src="img/taobao/05.jpg" data-src="img/taobao/05big.jpg" width="70" height="70" /></li> 48 </ul> 49 </div> 50 </body> 51 </html> 52 <script type="text/javascript"> 53 // 获取缩略图和大图事件源 54 // 1.先查找li 55 // 2.全部的li都要添加事件 56 var smallImg = document.getElementsByTagName('li'); 57 var bigImg = document.getElementById('bigImg'); 58 var bigImgs = [ 59 'img/taobao/01big.jpg', 60 'img/taobao/02big.jpg', 61 'img/taobao/03big.jpg', 62 'img/taobao/04big.jpg', 63 'img/taobao/05big.jpg']; 64 for (var i = 0 ; i < smallImg.length ; i++) { 65 // 记录每个缩略图的下标 66 smallImg[i].index = i; 67 smallImg[i].onmouseover = function () { 68 // 鼠标盖住缩略图时候选择缩略图边框变色，排他思想 69 for (var j = 0 ; j < smallImg.length ; j++ ) { 70 smallImg[j].className = ""; 71 } 72 this.className = "on"; 73 // 修改大图 74 bigImg.src = bigImgs[this.index]; 75 } 76 } 77 78 </script>