通过css的动画属性实现轮播图的显示效果
代码如下:
主体部分:
<div id="move">
<ul>
<li><img src="data:images/1.jpg" alt=""></li>
<li><img src="data:images/2.jpg" alt=""></li>
<li><img src="data:images/3.jpg" alt=""></li>
<li><img src="data:images/4.jpg" alt=""></li>
<li><img src="data:images/1.jpg" alt=""></li>
</ul>
</div>
div作为视窗位置和大小
ul和li作为布局的样式定位到div视窗位置
最后一张图片起到衔接和无缝过渡的效果
css样式部分:
<style>
* {
margin:;
padding:;
} #move {
width: 400px;
height: 300px;
margin: 200px;
border: 4px solid red;
overflow: hidden;
position: relative;
} ul {
width: 2000px;
position: absolute;
left:;
top:;
animation: move 10s ease 0s infinite normal;
} li {
float: left;
} @keyframes move {
0% {
left: 0px;
}
25% {
left: -400px;
}
50% {
left: -800px;
}
75% {
left: -1200px;
}
100% {
left: -1600px;
}
}
</style>
如有不足,虚心请教