dw DIV+CSS实现图片自动切换?
完全可以,用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;
}
效果图;
好像时间间隔设置太短了,可以把动画播放的时间延长一点。