console 命令行工具 X clear

console

$(function(){
	var name="(  www.zymseo.com)";
	//鼠标划过产品导航，右侧产品详情进行展示
	$(".nav").hover(function(){
		$(".p").addClass("in");
	},function(){
		$(".p").removeClass("in");
	});
	//鼠标划过大图，左右按钮进行显示
	$(".banner").hover(function(){
		$(".lr").show();
	},function(){
		$(".lr").hide();
	});
	//鼠标划过左侧产品导航，它的背景色和文字颜色进行改变
	$(".w li").mouseover(function(){
		var num=$(this).index();
		$(this).addClass("on").siblings().removeClass("on");
		$(".p").animate({marginTop:-465*num},0);
	});
	//鼠标划过底部小按钮，图片进行自动切换
	$(".anniu li").mouseover(function(){
		var a=$(this).index();
		$(this).addClass("hov").siblings().removeClass("hov");
		$(".pic").animate({marginLeft:-730*a},"slow");
		$(".pTxt").text($(".pic li img").eq(a).attr("alt")+name);
	});
	//点击左右按钮，图片进行自动切换
	var b=0;
	$(".pRight").click(function(){
		b++;
		b=b%6;
		$(".pic").animate({marginLeft:-730*b},"slow");
		$(".anniu li").eq(b).addClass("hov").siblings().removeClass("hov");
		$(".pTxt").text($(".pic li img").eq(b).attr("alt")+name);
	});
	$(".pLeft").click(function(){
		b--;
		b=(b+6)%6;
		$(".pic").animate({marginLeft:-730*b},"slow");
		$(".anniu li").eq(b).addClass("hov").siblings().removeClass("hov");
		$(".pTxt").text($(".pic li img").eq(b).attr("alt")+name);
	});
})

<div class="main">
		<div class="nav">
			<!--左侧文字列表-->
			<ul class="w">
				<li><a href="#">家用电器</a></li>
				<li><a href="#">手机</a>、<a href="#">数码</a>、<a href="#">京东通信</a></li>
				<li><a href="#">电脑</a>、<a href="#">办公</a></li>
				<li><a href="#">家居</a>、<a href="#">家具</a>、<a href="#">家装</a>、<a href="#">厨具</a></li>
				<li><a href="#">男装</a>、<a href="#">女装</a>、<a href="#">内衣</a>、<a href="#">珠宝</a></li>
				<li><a href="#">个护化妆</a></li>
				<li><a href="#">鞋靴</a>、<a href="#">箱包</a>、<a href="#">钟表</a>、<a href="#">奢侈品</a></li>
				<li><a href="#">运动户外</a></li>
				<li><a href="#">汽车</a>、<a href="#">汽车用品</a></li>
				<li><a href="#">母婴</a>、<a href="#">玩具乐器</a></li>
				<li><a href="#">食品</a>、<a href="#">酒类</a>、<a href="#">生鲜</a>、<a href="#">特产</a></li>
				<li><a href="#">营养保健</a></li>
				<li><a href="#">图书</a>、<a href="#">音像</a>、<a href="#">电子书</a></li>
				<li><a href="#">彩票</a>、<a href="#">旅行</a>、<a href="#">充值</a>、<a href="#">票务</a></li>
				<li><a href="#">理财</a>、<a href="#">众筹</a>、<a href="#">白条</a>、<a href="#">保险</a></li>
			</ul>
			<!--右侧产品详情-->
			<ul class="p">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
				<li>15</li>
			</ul>
		</div>
		<!--中间的轮播图-->
		<div class="banner">
			<!--产品大图-->
			<ul class="pic">
				<li>
					<a href="#">
						<img src="http://image14-c.poco.cn/mypoco/myphoto/20130403/23/57559396201304032329105735950681929_008.jpg?784x517_120" alt="第一张" width="730" height="454">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="http://image181-c.poco.cn/mypoco/myphoto/20110513/20/5339381620110513202912027.jpg" alt="第二张" width="730" height="454">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="http://image14-c.poco.cn/mypoco/myphoto/20130403/23/57559396201304032329105735950681929_008.jpg?784x517_120" alt="第三张" width="730" height="454">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="http://image181-c.poco.cn/mypoco/myphoto/20110513/20/5339381620110513202912027.jpg" alt="第四张" width="730" height="454">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="http://image14-c.poco.cn/mypoco/myphoto/20130403/23/57559396201304032329105735950681929_008.jpg?784x517_120" alt="第五张" width="730" height="454">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="http://image181-c.poco.cn/mypoco/myphoto/20110513/20/5339381620110513202912027.jpg" alt="第六张" width="730" height="454">
					</a>
				</li>
			</ul>
			<!--下边的小按钮-->
			<ul class="anniu">
				<li class="hov">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
			<!--左右按钮-->
			<ul class="lr">
				<li class="pLeft"> < </li>
				<li class="pRight"> > </li>
			</ul>
			<!--图片信息提示-->
			<div class="pTxt">仿京东侧边栏导航和广告图轮播效果制作</div>
		</div>
	</div>

li{list-style:none}
img{border:0px}
a{text-decoration:none}
.main{width:1200px;height:480px;margin:100px auto;overflow:hidden}
.nav{width:210px;height:465px;margin:0px auto 0px 100px;
position:relative;z-index:2}
.nav .w{width:210px;height:465px;float:left;background:red}
.nav .w li{width:200px;height:31px;padding-left:10px;line-height:31px;
color:white}
.nav .w li a{font-size:14px;color:white}
.nav .w li.on{background:white;color:red}
.nav .w li.on a{color:red}
.nav .p{width:740px;height:9999px;float:right;background:white;
display:none;position:absolute;left:210px}
.nav .p.in{display:block}
.nav .p li{width:740px;height:465px;color:black;font-size:50px;
text-align:center;line-height:465px}
.banner{width:810px;height:454px;background:#F3F5F6;position:relative
;left:30px;z-index:1;top:-458px;overflow:hidden;margin:0 auto;}
.banner .pic{width:4380px;height:454px;margin:0 auto;position:relative;}
.banner .pic li{width:730px;height:454px;float:left}
.banner .anniu{width:120px;height:16px;position:absolute;top:425px;left:350px}
.banner .anniu li{width:16px;height:16px;float:left;margin-right:2px;display:inline;
background:black;text-align:center;line-height:16px;font-size:12px;color:white;cursor:pointer;
border-radius:100%}
.banner .anniu li.hov{background:#b61b1f}
.banner .lr{width:730px;height:50px;position:absolute;top:185px;display:none}
.banner .lr li{width:20px;height:40px;background:black;opacity:0.5;-moz-opacity:0.5;
-khtml-opacity:0.5;filter:(alpha:50);color:white;text-align:center;line-height:40px;
cursor:pointer}
.banner .lr .pLeft{float:left}
.banner .lr .pRight{float:right}
.banner .pTxt{width:700px;height:30px;position:absolute;top:380px;background:black;opacity:0.5;
-moz-opacity:0.5;-khtml-opacity:0.5;filter:(alpha:50);color:white;font-size:12px;
padding-left:30px;line-height:30px}

本项目引用的自定义外部资源

jquery.min.js