京东左侧导航及图片轮播效果js源代码

阅读() @2018-06-12 17:05:26
京东左侧导航效果图
 
对于很多的web前端开发新手来说,梦想着有一天能把京东商城、天猫商城、淘宝等网站一步一步的写出来,那种感觉简直棒极了,但是大家都知道,商城类网站都是大同小异,与京东差不多,京东整个网站最难的地方就是左侧栏导航和banner广告图轮播切换效果,很多的新手都是卡在这块儿的js代码上边,所以我今天抽时间给大家写了一下这个效果,以下是京东左侧导航及图片轮播效果js源代码,仅供参考。文章底部提供源代码下载地址

html部分:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>京东首页</title>
  <meta name="Keywords" content="">
  <meta name="Description" content="仿京东首页左侧导航和banner轮播图效果制作,赵一鸣随笔博客技术支持(www.zymseo.com)">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/style.js"></script>
 </head>
 <body>
	<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="images/1.jpg" alt="第一张" width="730" height="454">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/2.jpg" alt="第二张" width="730" height="454">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/3.jpg" alt="第三张" width="730" height="454">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/4.jpg" alt="第四张" width="730" height="454">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/5.jpg" alt="第五张" width="730" height="454">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/6.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">仿京东侧边栏导航和广告图轮播效果制作(赵一鸣SEO博客提供技术支持;QQ:1047832475)</div>
		</div>
	</div>
 </body>
</html>

css部分:

*{margin:0px;padding:0px}
body{font:12px/1.5 "宋体";background:black}
li{list-style:none}
img{border:0px}
a{text-decoration:none}
.main{width:1200px;height:465px;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:730px;height:454px;background:orange;position:relative
;left:320px;z-index:1;top:-458px;overflow:hidden}
.banner .pic{width:9999px;height:454px}
.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}

javascript部分:

$(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);
	});
})

此站点文件夹中展示的效果是【京东左侧导航栏以及banenr图轮播效果】,适用于所有的网站使用。
 
使用方法:
 
1、将html和css代码复制到dw或其他编辑器中,修改相应的图片名称及图片大小即可,class类标签不要随便修改,否则对应的css和js名称也要修改。
 
2、js代码可原封不动的使用。
 
版权所有:
 
本测试效果由【赵一鸣随笔】博客技术支持,转载或有其他用途,请注明版权!

站点源代码下载地址:http://pan.baidu.com/s/1c0g8hsW

密码:8fct
微信二维码