JS实现轮播图

主界面代码

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="stylesheet" href="css/autoplay.css" type="text/css"/>
	</head>
	<body class="main">
	 
	<div id="box_autoplay">
	<div class="list">
		<ul>
			<li><img src="ad/index_ad1.jpg" width="900" height="335"/></li>
			<li><img src="ad/index_ad2.jpg" width="900" height="335"/></li>
			<li><img src="ad/index_ad3.jpg" width="900" height="335"/></li>
			<li><img src="ad/index_ad4.jpg" width="900" height="335"/></li>
			<li><img src="ad/index_ad5.jpg" width="900" height="335"/></li>
		</ul>
	</div>	
	</div>
	 
	</body>
</html>

autoplay.css

body, div, ul, li {
	margin:0;
	padding:0;
}
ul {
	list-style-type:none;
}
body {
	background:#000;
	text-align:center;
	font:12px/20px Arial;
}
#box_autoplay {
	position:relative;
	width:900px;
	height:335px;
	background:#fff;
	border-radius:5px;
	
	border:8px solid #fff;
	margin:10px auto;
	cursor:pointer;
}
#box_autoplay .list {
	position:relative;
	width:900px;
	height:335px;
	overflow:hidden;
}
#box_autoplay .list ul {
	position:absolute;
	top:0;
	left:0;
}
#box_autoplay .list li {
	width:900px;
	height:335px;
	overflow:hidden;
}
#box_autoplay .count {
	position:absolute;
	right:0;
	bottom:5px;
}
#box_autoplay .count li {
	color:#fff;
	float:left;
	width:20px;
	height:20px;
	cursor:pointer;
	margin-right:5px;
	overflow:hidden;
	background:#F90;
	opacity:0.7;
	filter:alpha(opacity=70);
	border-radius:20px;
}
#box_autoplay .count li.current {
	color:#fff;
	opacity:1;
	filter:alpha(opacity=100);
	font-weight:700;
	background:#f60;
}
#tmp {
	width:100px;
	height:100px;
	background:red;
	position:absolute;
}

猜你喜欢