jQuery-淘宝精品服装案例展示

淘宝精品服装案例用jQuery实现如下图所示：

分析整个结构：

1.整个结构由一个div进行包裹，左边放一个ul，ul里面有九个li，每个li里面包含一个a标签；右边放一个div，右边放一个ul，ul里面有九个li，每个li里面包含img标签。

2.左边的ul和右边的div都进行浮动。保证两个结构在一行显示。

3.左边的li的背景需要实现渐变效果，采用background-image: linear-gradient(方向, 颜色1, 颜色2)进行实现。

实现代码如下：

首先写HTML布局,把页面布局先写出来

    

        

            

                    
女靴
					
雪地靴
					
冬裙
					
呢大衣
					
毛衣
					
棉服
					
女裤
					
羽绒服
					
牛仔裤
            
        
        

            

                    

					

					

					

					

					

					

					

					

            
        
    

然后写CSS样式，页面的样式

最后写页面的效果，用Javascript和jQuery来实现效果

1.点击左边的列表右边div对应的图片显示出来，需要对每个li进行鼠标滑动点击事件绑定。

2.取出点击的li的索引，然后把对应的div显示出来，其余的隐藏。