全屏轮播图

全屏轮播图step1
HTML

CSS样式

body{
    margin: 0;
    padding: 0;
}


/*图片外层*/
.container{
    /*设置相对布局，显示一张图片大小，其余图片隐藏起来*/
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


/*图片组层*/
.images{
    /*绝对布局，高度为图片高度，长度为所有图片长度之和*/
    position: absolute;
    width: 400%;
    height: 100%;
    display: inline-block;
    /*text-align: center;*/
    z-index: 1;
}

/*每一张图片*/
.bk{
    float: left;
    position: absolute;
    width: 25%;
    height: 100%;
    display: inline-block;
}