<script type="text/javascript" src="http://rps_mybb.nextmail.ru/jquery.cycle.js"></script>
<script type="text/javascript" src="http://rps_mybb.nextmail.ru/jquery.easing.js"></script>

<style type="text/css">
#container{
  width: 100%;
  margin: 0;
  position: relative;
}

#prev, #next{
  display: block;
  width: 50px;
  height: 100%;
  text-align: center;
  color: #fff;
  font: 2em/35px Arial, Helvetica, sans-serif;
  text-decoration: none;
  background-color: #757364;
}

#prev:hover, #next:hover{
  background: #d9aa81;
}

#prev{
  position: absolute;
  z-index: 1000;
  right: 0;
  top: 0;
}

#next{
  position: absolute;
  z-index: 1000;
  left: 0;
  top: 0;
}

#content{
  background: #e6e6d1;
  clear: both;
  width: 90%;
  margin: 0 auto;
}

#content .contbox{
  padding: 10px;
  width: 100%;
}
</style>

<script type="text/javascript">
  jQuery(window).bind("load", function() {
    $('#content').cycle({ 
      fx:     'scrollHorz',
      prev:   '#prev',
      next:   '#next',
      height: 250,
      timeout: 0,
      easing: 'easeInOutExpo'
    });
  });
</script>

<div id="container">
 <a id="prev" href="" title="">→</a>
 <a id="next" href="" title="">←</a>
 <div id="content">
  <div class="contbox">
  1
  </div>
  <div class="contbox">
  2
  </div>
  <div class="contbox">
  3
  </div>
  <div class="contbox">
  4
  </div>
  <div class="contbox">
  5
  </div>
 </div>
</div>

<style type="text/css">
body {
  background: url(Адрес изображения) repeat !important;
}
</style>