1、要实现轮播图，主要使用到了css的动画
例：
<!DOCTYPE html>
<html>
<head>
<title>this is move</title>
<style type="text/css">
@keyframes moves{
0%{
left:0px;
}
23%{
left:0px;
}
27%{
left:-400px;
}
48%{
left:-400px;
}
52%{
left:-800px;
}
73%{
left:-800px;
}
77%{
left:-1200px;
}
96%{
left:-1200px;
}
100%{
left:-1600px;
}
}
.window{
width: 400px;
height: 200px;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.window .move{
width: 2000px;
height: 200px;
position: absolute;
animation: moves 9s linear infinite;
}
.window .move img{
width: 400px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="window">
<div class="move">
<img src="case2/1.jpg">
<img src="case2/2.jpg">
<img src="case2/3.jpg">
<img src="case2/4.jpg">
<img src="case2/1.jpg">
</div>
</div>
</body>
</html>
其中：
overflow: hidden;当溢出时隐藏
其中主要用到了动画。
924
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
