<style>

.banner{width: 250px;height: 200px;margin: 0 auto;overflow: hidden;position: relative;}

.banner_page{position: absolute;top: 0;left: 0px;width: 1250px;}

.bannerli{width: 250px;height: 200px;font-size: 50px;color: #333333;background: #B8001E;float: left;text-align: center;}

.banner_btn{width: 100%;margin: 0 auto;position: relative;margin-top: 100px;}

.banner_btn a{font-size: 15px;background: #898989;color: #FFFFFF;width: 20px;height: 20px;text-align: center;position: absolute;}

.banner_btn a.prev{top: 0;left: 0;}

.banner_btn a.next{top: 0;right: 0;}

        </style>

<script>

      $(function(){

      var aa = document.getElementsByClassName("banner_page")[0];

      function ban_btn(index){

aa.style.left = aa.style.left + index + 'px';

      }

      $(".prev").click(function(){

ban_btn(+250);

      })

      $(".next").click(function(){

ban_btn(-250);

      })

      });

         </script>

<div class="banner">

      <div class="banner_page">

      <div class="bannerli">1</div>

      <div class="bannerli">2</div>

      <div class="bannerli">3</div>

      <div class="bannerli">4</div>

      <div class="bannerli">5</div>

      </div>

      <div class="banner_btn">

      <a href="javascript:;" class="prev"><</a>

      <a href="javascript:;" class="next">></a>

      </div>

      </div>