用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; }