HTML——轮播效果

页面效果：类似与TB，JD等电商网站的首页广告，可以自动轮播，通过鼠标操作可定住某一张图片，同时侧边有可以打开二级菜单的导航栏。

实现代码要点：

1. 将三张图片在同一个div中叠加放置，并设置active样式，只有class中包含active才能显示出来；
2. 设置定时器timer，采取timer除以3取余的方式轮流对三个图片设置active类；
3. 鼠标悬停和点击右下圆点消除定时器，定住当前图片。

代码：
Banner区HTML：

<div class="banner" id="banner">
			<div class="bannarimg active" id="banner1">
				<img src="images/1.jpg">
			</div>
			<div class="bannarimg" id="banner2">
				<img src="images/2.jpg">
			</div>
			<div class="bannarimg" id="banner3">
				<img src="images/3.jpg">
			</div>
		</div>
		<!--"javascript:void(0)"表示按钮是一个超链接，但是该超链接没有任何作用-->
		<a href="javascript:void(0)" class="button next" id="button1"></a>
		<a href="javascript:void(0)" class="button last" id="button2"></a>
		<!--图片右下角的圆点-->
		<div class="dots" id="dots">
			<span class="active"></span>
			<span></span>
			<span></span>
		</div>

Banner区CSS

.main{
	width: 640px;
	height: 400px;
	position: relative;
	margin: 30px auto;
}

.banner{
	width:640px;
	height: 400px;
	position: relative;
}

.bannarimg{
	width:640px;
	height: 400px;
	position: absolute;
	float: left;
	display:none;
}

.banner .active{
	display:block;
}

.main .button{
	width: 20px;
	height:40px;
	position: absolute;
	top: 180px;
	background:url("images/arrow.png") center center rgb(220,220,220,0.3) no-repeat;
}

.main .button:hover{
	background-color: #333;
	opacity: 0.5;
}

.main .last{
	transform: rotate(180deg);
	left:160px;
}

.main .next{
	right:0;
}

.main .dots{
	position: absolute;
	bottom: 10px;
	right: 20px;
}

.main .dots span{
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	background-color