html中用css样式制作轮播图

html中用css样式制作轮播图

首先准备几张图，这几张图的大小要一样。这里以五张图为例。图的大小为width: 1920px,height: 530px;
下面是HTML代码：

<div class="banner-box">
	<div class="slide-box">
		<img src="1.png">
		<img src="2.png">
		<img src="3.png">
		<img src="4.png">
		<img src="5.png">
	</div>
</div>

css样式：

.banner-box{
    height: 530px;
    width: 1920px;
    overflow:hidden;/* 超出该标签的长高部分会被隐藏 */
}
.slide-box{
    height: 530px;
    width: 9600px;/*因为每张图的宽度是1920px，所以这里是1920px*5 的大小*/
    /* 动画属性 */
	/* animation:自定义关键帧 过度时间 过度效果 循环次数； */
    animation:aaa 7s ease-out infinite;
}
.slide-box img{
    float: left;
    width: 1920px;
    height: 530px;
}
@keyframes aaa{/*因为是五张图，所以分为5份，如果是4张就分为4份*/
    0%,19%{
        margin-left: 0;
    }
    20%,39%{
        margin-left: -1920px;
    }
    40%,59%{
        margin-left: -3840px;
    }
    60%,79%{
        margin-left: -5760px;
    }
    80%,100%{
        margin-left: -7680px;
    }
}