首先先新建一个html文件:
<body>
<div class="father">
<div class="son-left"></div>
<div class="son"></div>
<div class"son-right"></div>
</div>
先给他一个父元素div,然后给他三个孩子div,其实放图片的话一个div就够了,至于这里为什么有三个,是为了能让他在页面放大缩小时,轮播区域仍然居中,也就是说你看到的不一定是全部图片(放大倍数太大时,图片看不全),但一定是这个轮播图片的中间。
接着为他填充css样式,让他可以实现轮播
<style>
.father{
width:100%;
height:420px;
background-color:#f4f4f4;
}
.son{
width:1920px;
height:100%;
background-color:pink;
margin:auto;
}
</style>
这是第一步,给父元素和子元素加样式,由于屏幕大小一般不太大,所以建议先缩放到最小,待完成后再查看正常情况下效果;
<style>
.father{
width:100%;
height:420px;
background-color:#f4f4f4;
}
.son{
width:1920px;
height:100%;
background-color:pink;
margin:auto;
background-repeat:no-repeat;
background-position:center;
animation:lunbo 15s linear infinite;
}
@keyframes lunbo{
0%{background-image:url(./images/1.jpg);}
20%{background-image:url(./images/2.jpg);}
40%{background-image:url(./images/3.jpg);}
60%{background-image:url(./images/4.jpg);}
80%{background-image:url(./images/5.jpg);}
100%{background-image:url(./images/1.jpg);}
}
</style>
这是为div.son加动画,让他实现轮播效果;
background-position是让背景图片一直在div.son中间的,不能省略;
background-repeat,因为我的div.son就是按照最大的图片宽高来设置的,所以可以省略,但如果你的有图片大小比较小,你就需要这个属性,让他看起来不会重复。
@keyframes是动画的写法。
但这个效果有个致命的bug,那就是当你将缩放比例调大的时候,div.son模块是按照屏幕视口最左端来铺展的,也就是说你的1920px图片是以屏幕最左侧为起点来铺展的,因此你在屏幕中看不到最中间的图片,这不是我们想要的效果,这是第一点。第二点是当你页面缩放比例变大时,将产生滚动条。下面将解决这两个问题:
<style>
.father{
width:100%;
height:420px;
background-color:#f4f4f4;
display:flex;
}
.son{
width:1920px;
height:100%;
background-color:pink;
margin:auto;
background-repeat:no-repeat;
background-position:center;
animation:lunbo 15s linear infinite;
}
.son-left{
flex:1;
height:100%;
}
.son-right{
flex:1;
height:100%;
}
@keyframes lunbo{
0%{background-image:url(./images/1.jpg);}
20%{background-image:url(./images/2.jpg);}
40%{background-image:url(./images/3.jpg);}
60%{background-image:url(./images/4.jpg);}
80%{background-image:url(./images/5.jpg);}
100%{background-image:url(./images/1.jpg);}
}
</style>
首先让div.father变成伸缩盒,然后给左右两个div都加上flex:1;你也可以左右两个div写一个类,因为属性数值都一样,我这样写是为了看起来方便!这样他既不会产生滚动条,也实现了我们的需求。
最后效果是: