简易商品选项卡

css

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        .list{
            width: 1200px;
            background-color: aqua;
            margin: 0 auto;

        }
        .list ul{
            width: 100%;
            height: 100%;
            overflow: hidden;

        }
        .list ul li{
            width:294px;
            height:470px;
            background-color: #fff;
            transition: all 1s ease;
            overflow: hidden;
            float: left;
            margin: 10px;
            display: flex;
        }
        .list ul li:hover{
            background-color: #ff6699; 
        }
        .list ul li .pic_box{
            width:284px ;
            height: 460px;
           
            margin: auto;
            background-color: #fff;

        }
        .list ul li .pic_box .pic{
            width:284px ;
            height: 284px; 
            border:1px solid #666;
        }
        .list ul li .pic_box .pic img{
            width: 100%;
        }
        .list ul li ol{
            width: 284px;
            height: 40px;
            margin: 20px auto 0;
        }
        .list ul li ol li{
            width: 40px;
            height: 40px;
            overflow: hidden;
            border:1px solid #666;
        }
        .list ul li ol li img{
            width: 100%;
        }
        .list ul li ol li.on{
            border:1px solid red;
        }
    </style>

html

将图片替换成自己的图片

  <div class="list">
        <ul>
            <li>
               <div class="pic_box">
                    <div class="pic">
                      <a href="#">
                        <img src="./images/1.jpg" alt="">
                      </a>      
                    </div>
                    <ol>
                        <li class="on">
                            <img src="./images/1.jpg" alt="">
                        </li>
                        <li>
                            <img src="./images/2.jpg" alt="">
                        </li>
                        <li>
                            <img src="./images/1.jpg" alt="">
                        </li>
                        <li>
                            <img src="./images/2.jpg" alt="">
                        </li>
                    </ol>
               </div> 
            </li>
            <li>
                <div class="pic_box">
                     <div class="pic">
                       <a href="#">
                         <img src="./images/1.jpg" alt="">
                       </a>      
                     </div>
                     <ol>
                         <li class="on">
                             <img src="./images/1.jpg" alt="">
                         </li>
                         <li>
                             <img src="./images/2.jpg" alt="">
                         </li>
                         <li>
                             <img src="./images/1.jpg" alt="">
                         </li>
                         <li>
                             <img src="./images/2.jpg" alt="">
                         </li>
                     </ol>
                </div> 
             </li>
        </ul>
    </div>

js

 <script>
         (function(){ 
          var lis=  document.querySelectorAll('.list ul>li');
          for(var i=0;i<lis.length;i++){
               lis[i].onmouseenter=function(){
                   var oLis=this.querySelectorAll('ol>li');
                     var bigpic= this.querySelector('.pic img')
                     for(var j=0;j<oLis.length;j++){
                           oLis[j].onmouseenter=function(){
                            //排它思想 
                              for(var j=0;j<oLis.length;j++){
                                 oLis[j].className=''
                              }
                              this.className='on';

                             var url= this.children[0].src;
                            bigpic.src=url;

                           }
                     }
                    
               }
          }

         })();



    </script>

效果图