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

一、设计思路

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

设计思路：

这个效果分为两部分，左边是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: