Jquery touchwipe结合Jquery cycle怎么实现图片翻滚的效果

要的效果是图片两边2个按钮点击上一张下一张转换页面的结构如下：
<section>
   <div class="headPIC"> 
<div class="topic-info">
  <div class="topic-swipe" id="topic-swipe">
  <ul id="showplay"></ul> 
<volist name="vodArray" id="vo" key="k"> 
<div id="page_{$k}" style="display:none">
<li class="topic-item" onclick="location.href='{$vo.url}'">
<div class="img-l">
<img class="topic_img" link="{$vo.url}" url="{$vo.pcthumb}" loaded="0" alt="{$vo.title}" src="{$vo.pcthumb}" />
</div>
<h1 class="titile"><a target="_blank" href="{$vo.url}">{$vo.pctitle}</a></h1>
</li>
</div>
</volist>
  </div>
  <div class="pleft"><a href="#" id="prev"><img src="/Public/Images/left_dd.png" class="ibutton"/></a></div>
          <div class="pright"><a href="#" id="next"><img src="/Public/Images/right_dd.png" class="ibutton"/></a></div>
    </div> 
  </div>
</section>JS调用的代码在下面：
<script type="text/javascript">
function wipeLeft()
{
var total=$("#total").html();
var curpage=$("#curpage").html();
var lpage=parseInt(curpage)-1;
if(lpage<1)
lpage=total;
$("#curpage").html(lpage);
var str=$("#page_"+lpage).html();
$("#showplay").html(str);
} function wipeRight()
{
var total=$("#total").html();
var curpage=$("#curpage").html();
var rpage=parseInt(curpage)+1;
if(rpage>total)
rpage=1; $("#curpage").html(rpage);
var str=$("#page_"+rpage).html();
$("#showplay").html(str);
}$(document).ready(function() {
var cpage=$("#curpage").html();
var str=$("#page_"+cpage).html();
$("#showplay").html(str); $('.img-l').cycle({
timeout: 0,
fx: 'scrollHorz',
next: '#next',
prev: '#prev' 
});
 
$("#topic-swipe").touchwipe({
  wipeLeft: function() {
    $("#topic-swipe").cycle("next");
wipeLeft();
  },
  wipeRight: function() {
    $("#topic-swipe").cycle("prev");
wipeRight();
  },
min_move_x: 10,
min_move_y: 10,
preventDefaultEvents: true
});
});
</script>不能实现求高手解答！！！