干蹦轮播图的布局摘要

干蹦轮播图的布局摘要

首先先确定图片的数量,用一个大盒子包裹所有的元素.

我们使用 ul li 来包裹图片

<div class="carousel">
		<ul class="pic">
			<li class="current"><a href="javascript:;"><img src="images/lunbo/img1.jpg" /></a></li>
			<li><a href="javascript:;"><img src="images/lunbo/img2.jpg" /></a></li>
			<li><a href="javascript:;"><img src="images/lunbo/img3.jpg" /></a></li>
			<li><a href="javascript:;"><img src="images/lunbo/img4.jpg" /></a></li>
			<li><a href="javascript:;"><img src="images/lunbo/img5.jpg" /></a></li>
			<li><a href="javascript:;"><img src="images/lunbo/img6.jpg" /></a></li>
		</ul>

我们给大盒子设置宽,高等基本属性

.carousel{
			position: relative;
			width: 800px;
			height: 450px;
			border: 10px solid #ccc;
			margin: 50px auto;
		}

让所有的图都重叠在一起,然后都隐藏起来

.carousel .pic li{
			position: absolute;
			top: 0;
			left: 0;
			width: 800px;
			height: 450px;
			display: none;
		}

然后我们让li中的第一张图显示出来(单独的为它添加类名)

.carousel .pic li.current{
			display: block;
		}

当 li包裹着图片的时候,之间会有一个间距,我们要将图片进行砖块

.carousel .pic li img{
			display: block;

给按钮设置共同的属性

.carousel .btn a{
			position: absolute;
			top: 50%;
			width: 40px;
			height: 80px;
			margin-top: -40px;
			background-color: rgba(255,255,255,0.2);
			font: bold 40px/80px "SimSun";
			color: #fff;
			text-decoration: none;
			text-align: center;
		}

然后分别给左右按钮进行定位,添加伪类样式

.carousel .btn .leftbtn{
			left: 0;
		}
.carousel .btn .rightbtn{
			right: 0;
		}
.carousel .btn a:hover{
			background-color: rgba(255,255,255,0.5);
		}

然后紧接着后面用一个盒子包裹着左右的按钮

<div class="btn">
			<a href="javascript:;" class="leftbtn">&lt;</a>
			<a href="javascript:;" class="rightbtn">&gt;</a>
		</div>

用ol 和 li 来包裹图片下方的导航

		<ol class="sub">
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
	</div>

给下方的ol设置整体样式

.carousel .sub{
			position: absolute;
			bottom: 30px;
			left: 50%;
			width: 240px;
			height: 20px;
			padding: 5px 0 5px 20px;
			border-radius: 15px;
			margin-left: -130px;
			background-color: rgba(255,255,255,0.3);
		}

给每个li设置大小

.carousel .sub li{
			float: left;
			width: 20px;
			height: 20px;
			margin-right: 20px;
			border-radius: 50%;
			background-color: #fff;
		}

给每个被选中的li 设置样式

.carousel .sub li.current{
			background-color: #0ff;
}

一个初学者的学习笔记。