用css3动画实现图片切换效果,原理还是改变left值。只有最简单的自动播放功能,切换后短时间静止,通过最后的位置克隆第一张图片,实现无缝切换。
html结构
<div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="images/DSC01627.jpg" alt="pic1"></a></li> <li><a href="javascript:;"><img src="images/DSC01628.jpg" alt="pic2"></a></li> <li><a href="javascript:;"><img src="images/DSC02637.jpg" alt="pic3"></a></li> <li><a href="javascript:;"><img src="images/DSC01627.jpg" alt="pic1"></a></li><!-- 克隆第一张 --> </ul> </div>
css样式
*{ margin: 0; padding: 0; text-decoration: none; } ul{ list-style: none; } #container{ position: relative; width: 400px; height: 200px; overflow: hidden;/*隐藏溢出的图片*/ } .pic{ width:1600px;/*4张图的宽度*/ position: absolute;/*基于父容器进行定位*/ left:0; animation-name: focusmap; animation-duration: 12s; animation-iteration-count: infinite;//动画调用可以简写 } @keyframes focusmap { 0%,30%{ left: 0; } 35%,65%{ left: -400px; } 70%,99%{ left: -800px; } 100%{ left: -1200px; } } .pic li{ float: left; background: #5dd94e; } .pic li img { width: 400px; height: 200px; }