JS淘宝浏览商品

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>相册</title>      <style>         *{             margin:0;             padding:0;
        }         ul{             list-style: none;             overflow: hidden;         }         ul li{             float: left;             width: 55px;             height: 40px;             margin-top: 10px;             margin-left: 10px;             border: 2px solid #fff;         }             ul li.active{                 border-color: red;             }     </style> </head>
<body>         <img src="img/1.jpeg" id="img">         <ul>             <li>                 <a href="">                     <img src="img/1.jpeg" width="55px" height="40px" class="small">                 </a>
            </li>             <li>                 <a href="">                     <img src="img/2.jpeg" width="55px" height="40px"  class="small">                 </a>
            </li>             <li>                 <a href="">                     <img src="img/3.jpeg" width="55px" height="40px" class="small">                 </a>
            </li>             <li>                 <a href="">                     <img src="img/4.jpeg" width="55px" height="40px"  class="small">                 </a>           </li>         </ul>    <script>     var big=document.getElementById(‘img‘);     var small=document.getElementsByClassName(‘small‘);     for(var i=0;i<small.length;i++)     {         small[i].onmouseover=function()         {             for(var j=0;j<small.length;j++)             {                 small[j].parentNode.parentNode.setAttribute(‘class‘,‘‘);             }             var smalls=this.getAttribute(‘src‘);             big.setAttribute(‘src‘,smalls);
            this.parentNode.parentNode.setAttribute(‘class‘,‘active‘);         }     }     </script> </body>
</html>