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，可以旋转大的合成图像。
参考资料来源：
百度百科-轮播
它是用来增加页面交互的，可以使页面看起来更漂亮。不知道你想要的滚动效果是什么类型的，先列举三种吧。
第一种，滚动字幕
<marquee direction=up scrollamount=1 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()' height=60>
<table>欢迎光临</table>
</marquee>
第二种，窗口幻灯片
见附件幻灯片
第三种，全屏轮播
见附件轮播
没找到上传附件的地方，给个邮箱吧，觉得好的话，要采纳哦
js轮播图只播到两个就不动了原因如下：1、当元素的父容器没有指定定位方式时，指元素与body元素之间的偏移距离。
2、当对父容器指定定位方式时，则指元素与父容器之间的偏移距离。
3、当没有指定定位方式时，代码中的colee2.offsetTop值已经是元素colee2与body元素之间的偏移距离了。
