jQuery-----淘宝精品服饰案例

Dear 丶 2023-07-03 10:32 8阅读 0赞

## 一、设计思路 ##

主要的设计思路是把这个分为几部分了解好，每一部分又包括什么都要弄明白。
      咱们要做的效果图如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70]  
**设计思路：**

> 这个效果分为两部分，左边是9个小的li，里面放物品名称；右边是盒子，盒子里面放的图片。当我们鼠标再女靴上时右边的图片就要变成女靴的图片，当我们鼠标在呢大衣上时右边图片就要变成呢大衣的图片，同理每一个都是这样变化的。  
> 所以得出结论就是：当我们得到左侧索引值index时，让我们右侧的盒子相应索引号的图片显示出来就好了；让它的其它兄弟图片隐藏起来，我们这个效果就可以达到。

## 二、代码实现 ##

**1. css**

* { 
    				margin: 0;
    				padding: 0;
    				font-size: 12px;
    				list-style: none;
    				text-decoration: none;
    				}
    			.wrapper { 
    				width: 270px;
    				height: 220px;
    				margin: 100px auto 0;
    				border: 1px solid pink;
    				overflow: hidden;
    				}
    
    				#left, #content { 
    					float: left;
    				}
    				
    				#left li a { 
    					display: block;
    					width: 48px;
    					height: 27px;
    					border-bottom: 1px solid pink;
    					line-height: 27px;
    					text-align: center;
    					color: black;
    				}
    				
    				#left li a:hover { 
    					color: red;
    				}
    				#content { 
    					border-left: 1px solid pink;
    					border-right: 1px solid pink;
    				}

**2. jQuery**

//得到当前元素索引号的方法：$(this).index()
    			$(function(){ 
    				//鼠标经过左侧的小li
    				$("#left li").mouseover(function(){ 
    					//得到当前小li的索引号
    					var index = $(this).index();
    					//让我们右侧的盒子相应索引号的图片显示出来就好了
    					$("#content div").eq(index).show();
    					//让其余的图片（就是其他的兄弟）隐藏起来
    					$("#content div").eq(index).siblings().hide();
    				})
    			})

**3. html**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200205135453389.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0,size_16,color_FFFFFF,t_70