全屏轮播图step1
HTML
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="container" class="container">
<div id="images" class="images">
<img class="bk" src="./images/01.jpg" alt=""/>
<img class="bk" src="./images/02.jpg" alt=""/>
<img class="bk" src="./images/03.jpg" alt=""/>
<img class="bk" src="./images/04.jpg" alt=""/>
</div>
<!-- <div id="operation" class="operation">
<ul class="potlist">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p id="prev" class="leftRow"></p>
<p id="next" class="rightRow"></p>
</div> -->
</div>
</body>
</html>
CSS样式
body{
margin: 0;
padding: 0;
}
/*图片外层*/
.container{
/*设置相对布局，显示一张图片大小，其余图片隐藏起来*/
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/*图片组层*/
.images{
/*绝对布局，高度为图片高度，长度为所有图片长度之和*/
position: absolute;
width: 400%;
height: 100%;
display: inline-block;
/*text-align: center;*/
z-index: 1;
}
/*每一张图片*/
.bk{
float: left;
position: absolute;
width: 25%;
height: 100%;
display: inline-block;
}
