使用css3 动画就可以，预览地址：https://codepen.io/ansonznl/pen/KLyJjX

@AnsonZnl 不错，可以再用js再写个，呵呵

js的思路可以是设置元素className来切换

你这个是难为我胖虎啊 @haizhilin2013
面试那么长时间写个这个也是有点麻烦 考虑的比较多，简单说下思路还是ok的，
思路一 元素并排浮动 改变offset
思路二 position 层叠 改变z-Index

不算很好的实现，先占个楼。

https://codepen.io/Konata9/pen/GRKvxjx?editors=0111

.box > .main > .swiper > .swiperList {
position: absolute;
display: flex;
width: 3500px;
height: 270px;
animation: 20s swiper infinite; /循环/
}
.swiper > .swiperList > li {
width: 625px;
height: 270px;
}
.box > .main > .swiper > .swiperList > li:first-child {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(2) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(3) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(4) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(5) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}

/动画/
@Keyframes swiper {
0% {
left: 0px;
}

12% {
left: 0px;
}

25% {
left: -625px;
}

37% {
left: -625px;
}

50% {
left: -1250px;
}

62% {
left: -1250px;
}

75% {
left: -1875px;
}

87% {
left: -1875px;
}

100% {
left: -2500px;
}
}

.box > .main > .swiper > .swiperList {
position: absolute;
display: flex;
width: 3500px;
height: 270px;
animation: 20s swiper infinite; /循环/
}
.swiper > .swiperList > li {
width: 625px;
height: 270px;
}
.box > .main > .swiper > .swiperList > li:first-child {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(2) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(3) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(4) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(5) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}

/动画/
@Keyframes swiper {
0% {
left: 0px;
}

12% {
left: 0px;
}

25% {
left: -625px;
}

37% {
left: -625px;
}

50% {
left: -1250px;
}

62% {
left: -1250px;
}

75% {
left: -1875px;
}

87% {
left: -1875px;
}

100% {
left: -2500px;
}
}

c3整的挺6

1. 利用 animation-timing-function 的 steps
   https://codepen.io/hoseaguo/pen/NWYJbQr

2. 纯css无限轮播，鼠标悬停动画停止
   https://codepen.io/hoseaguo/pen/OJvqGGw