<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HOME</title>
<style>
.div1 {
float: left
padding: 5px
display: inline-block
border-radius: 50%
line-height: 0
}
.div1.active {
background-color: #ddddddb8
}
.div2 {
height: 10px
width: 10px
border-radius: 50%
border: 2px solid #dddddda6
display: inline-block
}
.div1.active .div2{
border: 2px solid transparent
background-color: #fff
}
</style>
</head>
<body class="non-google-page inited" style="background: rgb(67, 77, 193)">
<div class="div1 active" id='d1'>
<div></div>
</div>
<div id='d2'>
<div></div>
</div>
<div id='d3'>
<div></div>
</div>
<div id='d4'>
<div></div>
</div>
<div id='d5'>
<div></div>
</div>
</body>
<script>
setInterval(function(){
var active = document.getElementsByClassName("active")[0]
active.classList.remove('active')
var id = parseInt(active.id.replace('d',''))
if(id<5){
id++
}else{
id=1
}
document.getElementById("d"+id).classList.add('active')
}, 1200)
</script>
</html>
<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
}
1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
