Java 使用CSS仿京东官网菜单栏轮播图

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>京东</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="header">
			
		</div>
		<div class="main">
			<div class="menu">
				<ul>
					<li>秒杀</li>
					<li>优惠券</li>
					<li>PLUS会员</li>
					<li>闪购</li>
					<li>拍卖</li>
					<li>京东服饰</li>
					<li>京东超市</li>
					<li>生鲜</li>
					<li>全球购</li>
					<li>京东金融</li>
				</ul>
			</div>
			<div class="left">
				<ul>
					<li>
						<span>家用电器</span>
						<div class="sub">
							<h1>家用电器</h1>
							<p>家用电器家用电器家用电器家用电器家用电器家用电家用电器家用电器家用电器家用电器家用电器家用电家用电器家用电器家用电器家用电器家用电器家用电家用电器家用电器家用电器家用电器家用电器家用电家用电器家用电器家用电器家用电器家用电器家用电家用电器家用电器家用电器家用电器家用电器家用电家用电器家用电器家用电器家用电器家用电器家用电家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器</p>
						</div>
					</li>
					<li>
						<span>手机/运营商/数码</span>
						<div class="sub">
							<h1>手机/运营商/数码</h1>
							<p>手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码手机/运营商/数码</p>
						</div>
					</li>
					<li>
						<span>电脑/办公</span>
					</li>
					<li><span>家用电器</span></li>
					<li><span>家用电器</span></li>
					<li><span>家用电器</span></li>
					<li><span>家用电器</span></li>
					<li><span>家用电器</span></li>
					<li><span>家用电器</span></li>
					<li><span>家用电器</span></li>
				</ul>
			</div>
		</div>
		<div class="image">
			<div class="side" id="lunbo">
				<img src="img/1.jpg" id="img1" />
				<!--<ul>
					<li>
						<img src="img/1.jpg" class="pic" id="img1">
					</li>
					<li>
						<img src="img/2.jpg" class="pic" id="img2">
					</li>
					<li>
						<img src="img/3.jpg" class="pic" id="img3">
					</li>
					<li>
						<img src="img/4.jpg" class="pic" id="img4" >
					</li>
				</ul>-->
			</div>
		</div>
		<div class="footer">
			
		</div>
	</body>
</html>

index.css

* {
	margin: 0;
	padding: 0;
}

html,
body {
	width: 100%;
	height: 100%;
}

.header {
	width: 100%;
	height: 150px;
	background-color: aquamarine;
}

.main {
	width: 100%;
	height: 50px;
	background-color: crimson;
}

.main ul {}

.main ul li {
	margin-left: 50px;
	width: 80px;
	line-height: 50px;
	padding-left: 30px;
	float: left;
	list-style: none;
}

.main .menu ul li:hover {
	background-color: white
}

.left {
	position: relative;
	width: 200px;
	height: 680px;
	top: 50px;
	background-color: burlywood;
}

.left ul {
	position: absolute;
	margin-top: 0px;
}

.left ul li span {
	position: absolute;
	margin-left: -20px;
	text-decoration: none;
	color: green;
}

.left ul li {
	width: 200px;
	height: 50px;
}

.left ul li:hover {
	background-color: white;
}

.left ul li .sub {
	position: absolute;
	width: 800px;
	margin-left: 150px;
	z-index: 2;
}

.left ul li .sub h1 {
	font-family: "微软雅黑";
}

.sub {
	width: 800px;
	background-color: white;
	display: none;
}

.left ul li:hover .sub {
	display: block;
}

.image{
	width: 590px;
	height: 470px;
	margin-left: 300px;
	background-color: #DEB887;
	position: relative;
}
.image .side ul li{
	list-style: none;
}
.image .side ul li img{
	position: absolute;
}

index.js

var timer;
var i=1;
function lunbo(){
	timer=setInterval("show()",1000);
}
function show(){
	if(i==1){
		document.getElementById("img1").src="img/2.jpg";
		i++;
		return 0;
	}
	if(i==2){
		document.getElementById("img1").src="img/3.jpg";
		i++;
		return 0;
	}
	if(i==3){
		document.getElementById("img1").src="img/4.jpg";
		i++;
		return 0;
	}
	if(i==4){
		document.getElementById("img1").src="img/1.jpg";
		i=1;
		return 0;
	}
}
lunbo();

Java 使用CSS仿京东官网菜单栏 轮播图

猜你喜欢

Java 使用CSS仿京东官网菜单栏轮播图