Css用z-index实现轮播图（上）

 一、效果图

二、原理

div > u >  li > a > img，布局的时候让li的位置重叠，如果不设置z-index（值大的先显示），会显示后面的li。

所有li都有一个基础的class名，设置着基本的相关样式，属性z-index定义一个值。

再定义第二个class名，设置好新的css样式，属性z-index定义一个更大的值。

用js给li添加、移除第二个class，来实现切换当前图片的展示。

左右按钮和小圆点都添加点击事件。

添加定时器，每隔一段时间执行点击向右按钮操作，即显示下一个图片。

三、实现：

 <div class="banbox">
	<div id="banner">
		<ul class="slide">
			<li class="slide-item active" data-index="0">
				<a href="#"><img src="../img/banner1.png" /></a>
			</li>
			<li class="slide-item" data-index="1">
				<a href="#"><img src="../img/banner2.png" /></a>
			</li>
		</ul>
		<div class="ban_controls">
			<div class="page prev" data-target="prev"></div>
				<div class="page next" data-target="next"></div>
					<ul class="page_list">
						<li class="page_active active" data-index="0"></li>
                        <li class="page_active" data-index="1"></li>
					</ul>
			</div>
		</div>
</div>

.banbox{
	width: 68.5%;
	float: left;
	overflow: hidden;
	margin-bottom: 20px;
	border-radius: 3px;
	position: relative;
}
#banner{
	width: 100%;
	height: 260px;
	overflow: hidden;
	
}
#banner .slide{
	z-index: 3;
	opacity: 1;
	width: 100%;
	height: 100%;

}
#banner .slide li{
	position: absolute;
	top: 0;
	z-index: 3;
	opacity: 1;
	width: 100%;
	height: 100%;
}
#banner .slide li.active{
	z-index: 4;
}
#banner .page_list li.active{
	background: #12b7de;
}
#banner .prev,#banner .next{
	position: absolute;
	height: 32px;
	width: 40px;
	top: 50%;
	left: 50px;
	z-index: 4;
	margin-top: -25px;
	cursor: pointer;
	opacity: 0;
	transition: all 150ms;
}
#banner .prev{background: url(../img/page_prevt.png) no-repeat;}
#banner .next{
	background: url(../img/page_next.png) no-repeat;
	left: auto;
	right: 50px;
}
#banner:hover .ban_controls .page.prev{
	opacity: 7;
	left:20px;
}
#banner:hover .ban_controls .page.next{
	opacity: 7;
	right:20px;
}
.page_list{
	position: absolute;
	width: 100%;
	height: 26px;
	padding: 0;
	bottom: 0;
	z-index: 4;
	text-align: center;
	
}
#banner .page_list li{
	border-radius: 10px;
	background: #fff;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 7px;
	text-indent: -9999px;
	opacity: .9;
	cursor: pointer;
	transition: all 150ms;
}
#banner .page_list li:hover{
    opacity: 1;
    background: #12b7de;
}