HTML——轮播效果

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

实现代码要点：

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

代码：
Banner区HTML：

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: rgba(220,220,220,0.4);
	/*inset表示阴影模糊方向是向内的*/
	box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
	margin-right: 13px;
	cursor: pointer;
}

.main .dots .active{
	background-color: rgba(225,225,225,1);
}

Banner区JS

// 三目运算符，当n是字符串类型时返回document.getElementById(n)，否则返回n本身
function byId(n){
	return typeof(n)==="string"?document.getElementById(n):n;
}

var index=0;
var index2=0;
var timer=null;
var img = byId("banner").getElementsByTagName("div");
var dots = byId("dots").getElementsByTagName("span");
var item = byId("left").getElementsByTagName("span");
var content = byId("sub-menu").getElementsByClassName("sub-inner-box");
var bg = byId("sub-menu");
function slideImg(){
	var main = byId("main");
	//鼠标指在主div里时清除定时器
	
	main.onmouseover = function(){
		clearInterval(timer);
	}

	//鼠标移出图片后继续运行定时器
	main.onmouseout = function(){
		timer = setInterval(function(){
			index++;
			index2=index%3;
			changeImg();
		},2000);
	}

	//将事件转变为方法，在加载主div时自动触发
	main.onmouseout();

	for(var y=0;y<4;y++){
		item[y].setAttribute("data-index",y);
		item[y].onmouseover = function(){
			bg.style.display="block";
			for(var x=0;x<4;x++){
			content[x].style.display="none";
			}
			var j = this.getAttribute("data-index");
			content[j].style.display="block";
		}
		item[y].onmouseout = function(){
			bg.style.display="none";
			for(var x=0;x<4;x++){
				content[x].style.display="none";
				content[x].onmouseover = function(){
					this.style.display="block";
				}
			}
		}

	}
}


slideImg();


function changeImg(){
	for(var i=0;i<3;i++){
		img[i].style.display = "none";
		dots[i].className="";
	}
	img[index2].style.display = "block";
	dots[index2].className="active";
}

for(var d=0;d<3;d++){
	dots[d].id=d;
	dots[d].onclick=function(){
		index2=this.id;
		changeImg();
	}
}

var next = byId("button1");
next.onclick=function(){
	index=index+1;
	index2=index%3;
	changeImg();
}

var last = byId("button2");
last.onclick=function(){
	index=index-1;
	if(index<0){
		index=2;
	}
	index2=index%3;
	changeImg();
}

左侧导航区HTML：

		

			

					手机配件
					
			
			

					家用电器
					
			
			

					电脑
					
			
			

					家居
					
			
		
		

			

				

					
手机、配件
					

						手机通讯：
						手机
						/
						手机维修
					
					

						运营商：
						中国联通
						/
						中国移动
					
					

						娱乐：
						耳机
						/
						音响
					
				
			
			

				

					
电脑
					

                       电脑：
                       笔记本
                       /
                       平板
					
					

                       电脑配件：
                       显示器
                       /
                       CPU
					
				
			
			

				

					
家用电器
					

                       电视：
                       国产品牌
					
					

                       冰箱：
                       多门
					
					

                       厨房电器：
                       油烟机
                       /
                       洗碗机
					
				
			
			

				

					
家具
					

                       家纺：
                       被子
                       /
                       枕头
					
					

                       厨具：
                       烹饪锅具
					
					

                       生活日用：
                       收纳用品
					
				
			
		

导航区CSS

.main .leftblock{
	background-color: rgba(7,17,27,0.5);
	opacity: 0.5;
	position: absolute;
	width: 160px;
	height: 400px;
	left: 0;
	top: 0;
	/*z-index: 10;*/
}

.main .leftcontent{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	padding: 30px 20px;
	line-height: 60px;
}

.leftcontent a:link,.leftcontent a:visited{
	text-decoration: none;
	color:white;
}

.main .leftcontent .itemlist{
	font-size:18px;
	border-bottom: solid 1px rgba(255,255,255,0.5);
}

.main .leftcontent .itemlist .icon{
	margin-left: 30px;
	float:right;
}

.main .sub-menu{
	position: absolute;
	width: 300px;
	height:400px;
	left:140px;
	top:0;
	z-index: 20;
	background: white;
	display: none;
}

.main .sub-inner-box{
	position: absolute;
	background: white;
	display:none;
	z-index: 100;
}

.main .sub-inner-box .title{
	color:red;
	font-weight: bold;
	font-size:1.5em;
	margin: 20px;
}

.main .sub-inner-box .sub-row{
	margin:30px 20px;
	font-size:0.8em;
}

.bold{
	font-weight:bold;
}

.mr10{
	margin-right: 10px;
}

.mr10 .mr10{
	margin-left: 10px;
}

.sub-inner-box a:link,.sub-inner-box a:visited{
	text-decoration: none;
	color:black;
}