以上为特定的语法格式
name : 表示 动画名称，可自定义
time : 表示 动画持续的时间 比如 2S ,注意，“s”要大写
动画特性，具体参考css3手册，比如可放置，线性动动，或其它运动
outtime: 延迟时间 ，格式和time 一样
循环次数：可以是具体的数，不带单位，可以是无限循环，单词忘了，看手册
我自己用jquery写的纵向的，想要横向的我可以帮你改改。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-
8" />
<title>无标题文档</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
var height = $("ul li").height()
var ul = $("ul")
var picTimer
var btn = "<div class='scroll_btn pre'></div><div
class='scroll_btn next'></div>"
//$("ul").append(btn)
$("ul").hover(function() {
clearInterval(picTimer)
},function() {
picTimer = setInterval(
function() {
var field = $("ul
li:first")
field.animate
({marginTop:-height+'px'},600,function(){
field.appendTo
(ul).css('marginTop',0)
})
},3000
)
}).trigger("mouseleave")
//下一个需要 研究
$(".pre").click(function() {
var field = $("ul li:first")
var lastField = $("ul li:last")
field.animate({marginTop:height
+'px'},600,function(){
lastField.insertBefore(field)
})
})
$(".next").click(function() {
var field = $("ul li:first")
field.animate
({marginTop:-height+'px'},600,function(){
field.appendTo
(ul).css('marginTop',0)
})
})
})
</script>
<style type="text/css">
* { margin:0pxpadding:0px}
ul { width:200pxheight:200pxborder:1px solid #030
position:relativeoverflow:hidden}
li { list-style:nonewidth:200pxheight:200pxdisplay:block}
.scroll_btn { width:100pxheight:20pxposition:absolute
background:#000z-index:100}
.pre { left:10pxtop:10px}
.next { left:10pxbottom:10px}
</style>
</head>
<body>
<ul>
<li style="background:red"></li>
<li style="background:green"></li>
<li style="background:blue"></li>
<li style="background:yellow"></li>
</ul>
</body>
</html>
记得：<script language="javascript" src="jquery.js"></script>
载入jquery工程 才能看效果
