<script type="text/javascript" src="http://j-14kcob.narod.ru/cycle.js"></script>
<script type="text/javascript" src="http://j-14kcob.narod.ru/easing.js"></script>

<style type="text/css">
#prev, #next{
  display: block;
  width: 25px;
  height: 10px;
  text-align:center;
  color: #fff;
  text-decoration: none;
  background: #757364;
}
#prev:hover, #next:hover{
  background: #D9AA81;
}
#prev{
  float: left;
}
#next{
  float: right;
}
#content{
  background: #E6E6D1;
  clear: both;
}
#content .contbox{
    padding: 10px;
    width: 100%;
}
</style>

<table style="width: 100%">
	<tr>
<td  style="width: 15%"><a id="prev" href="" title="">←</a></td>
<td>
<div id="content">
	<div class="contbox">Содержимое 1</div>
	<div class="contbox">Содержимое 2</div>
</div>
</td>
<td  style="width: 15%"><a id="next" href="" title="">→</a></td>
	</tr>
</table>
<script type="text/javascript">
  jQuery(window).bind("load", function() {
    $('#content').cycle({ 
      fx:     'scrollHorz',
      prev:   '#prev',
      next:   '#next',
      height: 250,
      timeout: 0,
      easing: 'easeInOutExpo'
    });
  });
</script>