</div>
<style>
.change {
animation: change 9s steps(1) infinite
background-repeat: no-repeat
background-position: center center
background-size: 100% auto
width: 200px
height: 100px
}
@keyframes change {
0% {
background-image: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png)
}
33% {
background-image: url(https://www.duhongwei.site/img/201809/s1.png)
}
66% {
background-image: url(https://p4.ssl.qhimg.com/t01fcaa9d8a4d24b5f1.png)
}
}
</style>
纯 css 每3秒播一张图片。9s是总共时间，如果是4张图片这里写 12s
完全可以，用css的重复播放动画的功能实现自动切换。
做了个小例子，你可以看看，基本的思路就这样了，效果还比较不错啦。这个思路还可以用来作为图片滚动播放的例子呢。
body部分代码：
<body>
<div id="box1">
<div id="box2">
<img src="https://www.baidu.com/img/bd_logo1.png">
<img src="https://www.baidu.com/img/bd_logo1.png">
<img src="https://www.baidu.com/img/bd_logo1.png">
<img src="https://www.baidu.com/img/bd_logo1.png">
</div>
</div>
</body>
css的代码：
*{
padding:0
margin:0
}
html,body{
overflow-x:hidden
overflow-y:auto
}
#box1{
position:relative
width:500px
height:450px
margin:0 auto
background:red
overflow:hidden
}
#box2{
float:left
width:2000px
height:450px
animation:box2 2s both linear infinite
-webkit-animation:box2 2s both linear infinite/* Safari and Chrome */
}
#box2:hover {
animation-play-state: paused
}
@keyframes box2
{
from {
margin-left:0
}
to {
margin-left:-1500px
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
margin-left:0
}
to {
margin-left:-1500px
}
}
img{
float:left
width:500px
height:450px
}
效果图；
好像时间间隔设置太短了，可以把动画播放的时间延长一点。
哈哈，这几楼的回答都不太正确，css可以自己完成图片的自动切换，不需要什么js辅助。人家楼主问的如何用css来实现，你搞的那个什么用js来实现，答非所问，还弄个专业回答，逗子终结者？css有个执行简单动画的写法，比如animation。
我给你个例子：
#head-pic,#head-pic2{
width:145pxheight:145pxposition:absolute
top:200px
left:68px
z-index:2
border-radius:100px
-webkit-border-radius:100px
-moz-border-radius:100px
border:3px solid #fff
}
/*为浏览器兼容设置*/
@keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic2.jpg)opacity:1.0}
}
@-moz-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@-moz-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic.jpg)opacity:1.0}
}
@-webkit-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@-webkit-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic2.jpg)opacity:1.0}
}
@-o-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@-o-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic2.jpg)opacity:1.0}
}
#head-pic{
animation:headpic-slider 20s linear infinite
-moz-animation:headpic-slider 20s linear infinite
-webkit-animation:headpic-slider 20s linear infinite
}
#head-pic2{
animation:headpic-slider2 20s linear infinite
-moz-animation:headpic-slider2 20s linear infinite
-webkit-animation:headpic-slider2 20s linear infinite
}
