h5代码：
<div id=“wrap”><ul id=“list”><li>10</li><li>9</li><li>8</li><li>7</li><li>6</li><li>5</li><li>4</li><li>3</li><li>2</li><li>1</ul></div>
css代码：
<style type="text/css">@-webkit-keyframes move{0%{left:-500px}100%{left:0}}#wrap{width:600pxheight:130pxborder:1px solid #000position:relativemargin:100px autooverflow:
hidden}#list{position:absoluteleft:0top:0padding:0margin:0-webkit-animation:5s move infinite linearwidth:200%}#list li{list-style:nonewidth:120pxheight:130pxborder:1px solid redbackground: pinkcolor:#ffftext-align: centerfloat:leftfont:normal 50px/2.5em '微软雅黑'}#wrap:hover #list{-webkit-animation-play-state:paused}</style>
扩展资料：
轮播图是网站介绍其主要产品或重要信息的一种方式。简单的一点是，在网页的某一部分，会依次呈现几个带有重要信息的图片，这样访问者就可以快速了解网站想要表达的主要信息。各种新闻网站的头版头条也是以这种方式呈现的重要信息。
轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px，高度为512px。那么旋转的窗口大小应该是一张图片的大小，即1024×512，然后，将五张0px的图片水平连接，形成一张5120px宽、512px高的图片，最后，通过每次向左移动1024px，可以旋转大的合成图像。
参考资料来源：
百度百科-轮播
在html中轮播图怎么做,HTML轮播图怎么做1.
打开Axure,页面名称命名为“图片轮播”在左侧部件(线框图)中,选择动态面板,左键选中,并按住左键,拖动其至工作台页面中,在上方菜单栏将宽调整为400,高为200(宽高根据个人需求来自行设置),双击建立的动态面板,弹出“动态面板状态管理”窗口。给当前动态面板起名字为“图片轮播”
2.
在面板状态区域,点击“+”增加状态,需要有几个图片轮播,建立几个状态,在每个状态上,右键,可重命名,当前我们做三个图片轮播的,命名为“图1”“图2“”图3“。完成后,点击窗口的确定按钮
3.
在右侧窗口下方“部件管理”,双击动态面板的状态“图1”(注意,如果看不到部件管理,可以在菜单栏的“视图”-“面板”设置)
4.
在左侧的“元件”,左键选中并拖动一个“图片”放置于当前的工作窗口中
animation-name： 规定需要绑定到选择器的 keyframe 名称。animation-duration： 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function： 规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count： 规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。
@keyframes{
}
给每个动画及暂停分配时间，按照总时间的百分比分配；
以三张图片为例制作轮播图，若将最后的数值设置为100%，出现问题在于最后一张到第一张的切换没有动画；尝试给最后一张图片到第一张图片的动画时间，但是中间的切换效果是从最后一张向右滑动直到显示出第一张图，其效果反人类，不美观；但是，通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
方法与一中大致相同，唯一更改的地方是css3的@keyframes规则里面的内容
若只将要显示的三张图片导入，会出现最后一张图片到第一张图片没有动画效果；通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
问题在于图片一直处于切换状态，中间没有停顿；
