轮播图案例

慕课网就业班版本

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

实现原理

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

准备工作：

HTML部分

<div class="banner" id="banner">
		<div class="slide-img slide-one slide-active"></div>
		<div class="slide-img slide-two"></div>
		<div class="slide-img slide-three"></div>
	</div>

CSS部分

*{
	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);
}

JS部分

//封装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";
}