1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
<div class="div1"><div class="div2">
<p>111111111111111111111</p>
<p>211111111111111111111</p>
<p>311111111111111111111</p>
<p>411111111111111111111</p>
<p>511111111111111111111</p>
<p>611111111111111111111</p>
<p>711111111111111111111</p>
<p>2211111111111111111111</p>
<p>331111111111111111111</p>
<p>441111111111111111111</p>
<p>551111111111111111111</p>
<p>661111111111111111111</p>
<p>771111111111111111111</p>
<p>881111111111111111111</p>
<p>991111111111111111111</p>
<p>001111111111111111111</p>
</div>
</div> .div1 {
width:200px
height:200px
overflow:hidden
margin:auto
position:relative
}
@keyframes anis {
100% {
transform:translateY(-200px)
}
}img {
position:absolute
}
.div2 {
animation:anis 10s linear infinite
}
.div2:hover {
animation-play-state:paused
}
其实是这样的。轮播图其实是一张很宽的图片，根据所在div设置宽度分成几张图片拼接起来的图片。当切换的时候，js移动该div层的背景图片位置也就是操作 CSS的 background-position 属性，来达到看起来好像轮播的效果
