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