[郑州|结业弟子]JS-王薇霖|2020年06月22日的日报-技能树.IT修真院

发表于： 2020-06-22 22:28:31

1 1340

今天完成的事情：

只用html css实现轮播图

使用CSS3 animation 属性和 @keyframes 规则

主体思想

准备相同大小的多个图片
将要展示图片横排放在一个图片容器里面
在图片容器外再加一个展示容器，展示容器大小为图片大小
给图片容器添加自定义动画，在动画不同阶段设置递增的偏移值

注意事项

动画效果分为切换和停留两部分
自定义动画阶段与图片数量相关
动画各阶段偏移值与图片大小相关
最后一个图片到第一个图片没有切换效果，貌似要用到js，一个思路是可以由最后一个图片再挨个迅速切换到第一个图片

html代码

<div class="rotation">
            <div class="photo">
                <img src="14w/轮播.png">
                <img src="14w/轮播1.png">
                <img src="14w/轮播2.png">
                <img src="14w/轮播3.png">
            </div>
        </div>

img 元素外面是图片容器，图片容器外面是展示容器。

css代码

.rotation{
    height: 31vw;  /展示容器设置高度避免图片下移/
    overflow: hidden;  /设置超过容器元素隐藏/
}
.photo{
    width: 400vw;  /图片容器设置所有图片宽度和/
    height: 31vw;
    animation:lunbo 15s infinite;  /设置过度动画时间为15秒，第一张到最后一张的时间/
}
.photo img{
    width: 100vw; /图片宽度为整个页面宽度/
    height: 31vw;
    float: left;  /图片添加 float 效果，不用考虑麻烦的 margin 问题/
}
@keyframes lunbo {  /创建动画/
    0%,20%{
        margin-left: 0;  /第一阶段，第一张图位置不变/
    }
    25%,45%{
        margin-left: -100vw;  /第二阶段，第二张图片左移动，移动一个图片的宽度到显示区域/
    }
    50%,70%{
        margin-left: -200vw;  /第三阶段，第三张图片，向左移动两个图片的宽度/
    }
    75%,95%{
        margin-left: -300vw;
    }
}