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: 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

		<div class="wrapper">
			<ul id="left">
				<li><a href="#">女靴</a></li>
				<li><a href="#">雪地靴</a></li>
				<li><a href="#">冬裙</a></li>
				<li><a href="#">呢大衣</a></li>
				<li><a href="#">毛衣</a></li>
				<li><a href="#">棉服</a></li>
				<li><a href="#">女裤</a></li>
				<li><a href="#">羽绒服</a></li>
				<li class="left_01"><a href="#">牛仔裤</a></li>
			</ul>
			<div id="content">
				<div>
					<a href="#"><img src="img/a.jpg" width="220px" height="220px"></a>
				</div>
				<div>
					<a href="#"><img src="img/b.jpg" width="220px" height="220px"></a>
				</div>
				<div>
					<a href="#"><img src="img/c.jpg" width="220px" height="220px"></a>
				</div>
				<div>
					<a href="#"><img src="img/d.jpg" width="220px" height="220px"></a>
				</div>
				<div>
					<a href="#"><img src="img/e.jpg" width="220px" height="220px"></a>
				</div>
				<div>
					<a href="#"><img src="img/f.jpg" width="220px" height="220px"></a>
				</div>
				<div>
					<a href="#"><img src="img/g.jpg" width="220px" height="220px"></a>
				</div>
				<div>
					<a href="#"><img src="img/h.jpg" width="220px" height="220px"></a>
				</div>
				<div>
					<a href="#"><img src="img/i.jpg" width="220px" height="220px"></a>
				</div>
			</div>
		</div>