实现效果：
图片轮播，鼠标移入后轮播暂停，移除后轮播继续。
基本原理：
利用Css3 animation动画属性，用transform 实现图片移动。通过图片复制备份，实现的图片的无缝衔接。
核心知识点：
1、@keyframes 通过 @keyframes 规则，您能够创建动画。
Firefox 支持 @-moz-keyframes 规则。
Opera 支持 @-o-keyframes 规则。
Safari 和 Chrome 支持 @-webkit-keyframes 规则。
语法
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 说明 |
|---|---|
| animationname | 必需的。定义animation的名称。 |
| keyframes-selector | 必需的。动画持续时间的百分比。
合法值： 0-100% 注意： 您可以用一个动画keyframes-selectors。 |
| css-styles | 必需的。一个或多个合法的CSS样式属性 |
2、animation
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。
实例：
animation: imgMove 5s linear infinite;
参数：
animation-name 执行动画的名称 imgMove
animation-duration 完成动画的时间5s
animation-timing-function 完成动画是的速度 linear -匀速
animation-iteration-count 播放的次数 infinite-无限次播放
3、最后是实现鼠标移入动画暂停，这里有两个介绍：
:hover{}定义鼠标移入触发的事件
animation-play-state:paused/running 动画的暂停与播放
代码：图片请自行添加。例子中图片大小90px*90px
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } div { width: 360px; height: 90px; margin: 200px auto; overflow: hidden; } div>ul { /*设置ul的宽度为2倍div的宽度*/ width: 200%; list-style: none; /*动画属性*/ animation: imgMove 5s linear infinite; } /* 暂停动画 */ div>ul:hover { animation-play-state: paused; } div>ul>li { width: 90px; float: left; } div img { width: 100%; } /*创建动画*/ @keyframes imgMove { from { transform: translateX(0px); } to { transform: translateX(-360px); } } </style> </head> <body> <div> <ul> <li><img src="images/1.png" alt="" /></li> <li><img src="images/2.png" alt="" /></li> <li><img src="images/3.png" alt="" /></li> <li><img src="images/4.png" alt="" /></li> <!--将需要轮播的图片在复制一份--> <li><img src="images/1.png" alt="" /></li> <li><img src="images/2.png" alt="" /></li> <li><img src="images/3.png" alt="" /></li> <li><img src="images/4.png" alt="" /></li> </ul> </div> </body> </html>