实现效果：
图片轮播，实现图片整体切换效果
基本原理：
总共用10秒，0%到30% 3.333秒内显示第一张图片。30%到33%图片从0到-291px切换，花费0.333秒。以此类推。
图片3以后增加图片1的目的是让动画衔接自然。100%就是0%。
div是显示区域，ul是图片的移动区域。
代码：图片请自行添加。例子中是图片大小291px*571px
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; } div{ margin-left:0; width:291px; height:517px; overflow:hidden; } div>ul { width: 1164px; height: 517px; list-style: none; -webkit-animation: mymove 10s linear infinite; } div>ul>li { margin-top: 0; float: left; } div>ul:hover { animation-play-state: paused; } @-webkit-keyframes mymove { 0% { margin-left: 0; } 30% { margin-left: 0; } 33% { margin-left: -291px; } 63% { margin-left: -291px; } 66% { margin-left: -582px; } 97% { margin-left: -582px; } 100% { margin-left: -873px; } } </style> </head> <body> <div> <ul> <li><img src="img/01.png"></li> <li><img src="img/02.png"></li> <li><img src="img/03.png"></li> <li><img src="img/01.png"></li> </ul> </div> </body> </html>
疑问：如果图片张数不是固定的，代码该如何调整？
方案：
根据接口返回的数量，通过js动态添加样式
var style=document.styleSheets; style[0].insertRule(`body{ background:red }`)
document.styleSheets返回的对象是一个StyleSheetList。它是一个StyleSheet对象的有序集合。
insertRule() 方法在样式表中插入一条规则。
insertRule(rule,index)
index：可选，规定新规则插入的位置，默认值为0，也就是在样式表起始位置插入。