1 
  2 
  3     
  4         
  5         
  6         
  7         
 51         
 52         
 53         
 71     
 72     
 73         

 74             

 75                 
女靴
 76                 
雪地靴
 77                 
冬裙
 78                 
呢大衣
 79                 
毛衣
 80                 
棉服
 81                 
女裤
 82                 
羽绒服
 83                 
牛仔裤
 84             
 85             
 86             

 87                 

 88                 

 89                 

 90                 

 91                 

 92                 

 93                 

 94                 

 95                 

 96                 

 97                 

 98                 

 99                 

100                 

101                 

102                 

103                 

104                 

105             
106             
107             

108                 
女包
109                 
男包
110                 
登山鞋
111                 
皮带
112                 
围巾
113                 
皮衣
114                 
男毛衣
115                 
男棉服
116                 
男靴
117             
118         
119     
120 

jQuery实现思路：

①分别获取左侧列表、右侧列表中所有的li,注册鼠标进入事件

$( "#left>li" ).mouseover( function(){ } );//左侧

$( "#right>li" ),mouseover( function(){ } );//右侧

②获取鼠标当前进入的li的index

var index=$( this ).index(); //该方法获取元素的index

③右侧元素的index需要上述index+9,因为中间图片是所有的图片放在一起，而左右的li是分开放置，为了获得li对应的图片，需要给右侧li的索引加上左侧li的数量

④鼠标进入的li的图片显示，其他的图片隐藏

$( "#center>li:eq("+index+“)" ).siblings("li").hide();

$( "#center>li:eq("+index+")").show();

注意：siblings("标签名字")  获取选中标签的所有的兄弟标签

所需素材下载地址：https://pan.baidu.com/s/11qXxk8uXgDe4JoBMw5__Rg

注意路径的配合  images与html页面应该为同一等级文件夹