轮播图案例

老师讲的很详细，我这边就总结一下如何使图片轮播，怕以后面试会问到。

将图片放入一个个盒子中，然后将这些盒子放入一个大盒子中，先将盒子全隐藏，然后使每个盒子轮流显示。
关键是用到了定时器setInterval和display属性。

*{
	padding: 0;
	margin: 0;
}

.banner{
	width: 1200px;
	height: 460px;
	overflow: hidden;
	margin: 20px auto;
}

.slide-img{
	width:1200px;
	height:460px;
	background-repeat:no-repeat;
	display: none;
}


.slide-active{
	display: block;
}

.slide-one{
	background-image: url(../img/bg1.jpg);
}

.slide-two{
	background-image: url(../img/bg2.jpg);
}

.slide-three{
	background-image: url(../img/bg3.jpg);
}

//封装getElementById方法
function byId(id) {
    return typeof(id) === "string"?document.getElementById(id):id;
}
//取出banner中的三个盒子放入pics中
var pics = byId("banner").getElementsByTagName("div");
//定义一个全局变量作为索引
var index = 0;
//定义一个定时器
var timer = null;


//页面加载完成后自动执行该方法
window.onload = function() {
    //每过三秒index值会加一，但不会大于或等于pics的长度
    timer = setInterval(function() {
 index++;
 if(index >= pics.length) index = 0;
 changeImg();
    },3000);
}

//根据当前的index索引值来改变图片的显示与隐藏
function changeImg() {
    //先通过遍历将图片全部隐藏
    for(var i = 0; i < pics.length; i++){
 pics[i].style.display = "none";
    }
    //取出与当前index值对应的图片进行显示
    pics[index].style.display = "block";
}