前端必写之--------轮播图

轮播图的实现原理

顾名思义，轮播图就是实现图片的轮换播放效果。先显示一张图片，一定的时间，让这张图片消失，下一张图片显示。让它们实现跟淘宝首页一样的广告轮播效果。
废话不多说上代码：
HTML布局

<div class="banner" id="main">
	<ul id="pic">
		<li><a href="#"><img src="img/01.jpg"/></a></li>
		<li><a href="#"><img src="img/02.jpg"/></a></li>
		<li><a href="#"><img src="img/03.jpg"/></a></li>
		<li><a href="#"><img src="img/04.jpg"/></a></li>
		<li><a href="#"><img src="img/05.jpg"/></a></li>
	</ul>
	<ul class="banner-btn" id="list">
		<li class="on"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
/*思路就是一个大盒子里面有两个ul，一个放图片，一个放下面的小圆点小圆点的ul定位到最下面，li里面的图片左浮动*/

CSS样式

.banner{
   
	width: 1020px;
	height: 360px;
	float: right;
	position: relative;
	overflow: hidden;
}
.banner-btn{
   
	position: absolute;