怎么实现当前模块循环特效轮播，最好两侧再加箭头，新手求指导！！！

<!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/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.yuangong { height:639px ; background-color:#e4e4e4; margin:auto 80px;}
.yuangong .yuangongtit { padding:45px 0px 40px;}
.yuangong .yuangongcont ul li { float:left; background-image:url(../images/yuangongbj.jpg); height:215px;; width:219px; margin:10px 9px;}
.yuangong .yuangongcont ul li img { height:100%; width:100%}
.yuangong .yuangongcont ul li:nth-child(even) { width:320px; height:196px; font-family:"微软雅黑";font-size:16px; text-align:left; padding:10px 8px; background-color:#FFF;}
.yuangong .yuangongcont ul li:hover{ box-shadow:0px 0px 1px 1px #94390D;;}
</style>
</head>

<body>

<div class="yuangong">
<div class="wrap">
<div class="yuangongcont">
<ul>
<li><a href=""><img src="{zzz:tempath}images/shili1.jpg" /></a></li>
<li><a href="">介绍</a></li>
<li><a href=""><img src="{zzz:tempath}images/shili1.jpg" /></a></li>
<li><a href="">介绍</a></li>
<li><a href=""><img src="{zzz:tempath}images/shili1.jpg" /></a></li>
<li><a href="">介绍</a></li>
<li><a href=""><img src="{zzz:tempath}images/shili1.jpg" /></a></li>
<li><a href="">介绍</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>