模拟淘宝商品信息切换功能

大家好，我是攻城师 JiRo，作为初学者，有很多不懂的地方，都出写博客可以更快提升自己，所以些了第一篇文章，

Next：

今天模拟了一下 淘宝商家信息页面的商品分类中的一个小功能，就是点击不同图片（商品），导航栏中将显示该图片。

  希望各位大佬帮我看看哪里不合适的 希望多多指教  

下面这段HTML代码 是网页主体   即一个大盒子，里面有个小盒子 小盒子用来展示商品图片的  当然每个人的实现思路不同  希望大佬们能多多分享

<!--本案列实现鼠标悬停某商品  导航栏将显示该商品图片功能-->
		<div class="nav">
			<ul id="head">
				<li class="li" id="l1">
					<a href=""><img src="img/01.jpg" /></a>
				</li>
				<li class="li" id="l2">
					<a href=""><img src="img/02.jpg" /></a>
				</li>
				<li class="li" id="l3">
					<a href=""><img src="img/03.jpg" /></a>
				</li>
				<li class="li" id="l4">
					<a href=""><img src="img/04.jpg" /></a>
				</li>
				<li class="li" id="l5">
					<a href=""><img src="img/05.jpg" /></a>
				</li>
			</ul>
			<div class="body" id="body">
				<img />
			</div>
		</div>

样式表要不要写上呢  还是写上吧  因为我就马马虎虎的谢了一段样式 （css）  多多包含

	<style>
			* {
				list-style: none;
				margin: 0;
				padding: 0;
				text-decoration: none;
			}
			
			.nav {
				width: 980px;
				height: 500px;
				background: pink;
				margin: 40px 50px;
				position: relative
			}
			
			ul>li {
				margin: 320px 20px;
			}
			
			a img {
				width: 150px;
				height: 150px;
			}
			
			.li {
				width: 150px;
				height: 150px;
				background: yellow;
				float: left;
			}
			
			.body {
				position: absolute;
				width: 804px;
				height: 304px;
				left: 93px;
				border: ;
			}
		</style>

那么 接下来 该主角上场了  也就是JS代码     因为我们都知道 网页的行为使网页动态的展现给了用户。实现了用户与网页的交互，所以一个完整的网页离不开 JS  当然CSS 也必不可少。一起来看看代码

<script>
			/*
						 js代码 鼠标停留那个图片是 导航栏上房盒子将呈现该张图片
						 */
			/*
			 1.定义变量
			 */
			var show = document.getElementById('body');
			var img = header.getElementsByTagName('img');
			show.onmouseover = function() {
				img.style.width = '804px';
				img.style.height = '304px';
			}
             /*
                              核心代码  封装函数
              */
			function Go(no) {
				img[no].onmouseover = function() {
					show.style.background = 'url(img/0' + (no + 1) + '.jpg)';
				}
			}
         /*
                调用函数
         */
			Go(0);
			Go(1);
			Go(2);
			Go(3);
			Go(4);
		</script>s

以上就是全部的代码了  

下面是效果展示图   今天的分享到此结束 

开发工具：Hbuilder 

图片来源于网络 

图片来源于网络